Art Storefronts Support Center

Search for answers to your questions by entering keywords below, or look through our knowledge base.

How to: Add Videos to Your Products Page

Follow

Content

 

Overview

When you’re working on your website, you may have some personalized videos that you want to put on your website. These videos could be of you painting, at a trade show or even a clip of an interview that you have done in the past. While you do have the ability to add videos to your site, you want to be sure to keep them to a minimum to make sure your site is not cluttered and loads at the most optimal speed.

This resource is going to guide you through the process of adding videos to your product pages. Before proceeding, you might benefit from reviewing these articles:

  1. How To: Embed Video Uploaded to Extra Files 
  2. How To: Embed a YouTube Video: 



Adding video uploaded to Extra Files to a product description

This will only work if you video is formatted as an MP4, and is under 100MB. If your video is larger than 100MB, you will need to upload it to YouTube instead, and embed the video from there.

 

First you should open your Site Manager, and in the Jump To menu on the top right, click on Extra Files.

 

mceclip0.png

 

Once the page has loaded, click on the Add Photos button to select your MP4 video, then click on OK to start it uploading.

mceclip1.png

Now you’re going to go to the Embed Responsively site. You will be first pasting in the start of the custom code, then the address of the video you just uploaded, and finally the end of the custom code.

Let’s start by loading up the embed site, which you can do at http://embedresponsively.com

 

Once the site has loaded, go to the Generic iFrame tab, and delete the text in the Generic iFrame Embed field.

mceclip2.png

 

Now for the next step, you’ll need to copy all of this text and paste it into the field you just emptied:

<p><video controls="" height=max-height width="100%"><source src="

Now you need to go back to your Extra Files page on your site. What you need to do here is right-click on the copy url link just above the still from the uploaded video.

mceclip3.png

Select Copy Link (the exact name will depend on which browser you’re using). This will copy the address that we’ll need for the next step.

 

mceclip4.png

 

Now we go back to the Embed Responsively site, and paste the address to the right of the code we added in the previous steps.

 

mceclip5.png

 

Now you need to copy this next snippet of code, and paste it after the address that you just pasted. (You may need to move the cursor to the end of line when you return to the page)

" type="video/mp4" />Your browser does not support the video tag.</video></p>

Now click on the Embed button, and you’ll see the player window with your video showing just beneath the input field.

mceclip6.png

 

Now you should scroll down until you can see the embed code which the site has just generated. Highlight and copy all of this text.

 

mceclip7.png

 

Now you need to go back to your Site Manager, go to the Art Print Store or Standard where your product is located, and edit the product you wish to add this video to.

 

mceclip8.png

 

Scroll down from here, and locate the Short Description field.

 

mceclip9.png

 

Click on the Source button in the upper-left of the editor window.

 

mceclip10.png

 

Paste the code from Embed Responsively into this field, and then click on Save.

 

mceclip11.png

 

Now click on the Source button again, and you’ll see the top of your video in the editor window.

 

mceclip12.png

 

Now click on the Preview Site button, and you’ll open the product on your live site, where you’ll see the video displayed beneath the product title on the right hand side of the page.

 

mceclip13.png

 

You can also open the product page on your mobile device, and check the video there. (You may need to scroll down a little)

 

mceclip14.png

 

Adding video uploaded to YouTube to a product description

First we’ll need to copy the address to the video. To generate the link you will need, open the video in your browser and click on the SHARE button under the playback window.

 

mceclip15.png

 

In the pop-up window that is displayed, click on the COPY link to copy the address of this video to use later.

 

mceclip16.png

 

The next step requires you go to the Embed Responsively site in order to generate the embed code to add to your product page. You can access it from this link: http://embedresponsively.com 

When the page has loaded, make sure you have YouTube selected, and paste the address of your page into the YouTube Page URL field.

 

mceclip17.png

 

Click on the Embed button, and you’ll see the player window appear beneath the URL field.

 

mceclip18.png

 

Now scroll down the page, and you need to highlight and copy all of the text in the Embed code text area.

 

mceclip19.png

 

It’s now time to open your Site Manager, and go to your Art Print Store or Standard Store containing the product page where you will be adding this video.

 

mceclip20.png

 

Scroll down until you can see the Short Description section, and click on the Source button in the upper left corner of the editor.

 

mceclip21.png

 

Now paste into the editor window the code you generated on the Embed Responsively site, and click on Save. (The code should show up as a very long single line in the editor window)

 

mceclip22.png

 

Click on the Source button again, and it should show a box labelled Iframe in the editor window. Click on Preview Site at the bottom of the page to view the product on your live site.

 

mceclip23.png

 

You can see the embedded video on the right hand side of the product page, below the product title, and above the product options.

 

mceclip24.png

 

If you view the same product on a mobile device, you’ll see it correctly sized there for the width of the screen, although you may need to scroll down a little for it to become visible.

 

mceclip25.png

Was this article helpful? Please let us know how we can improve it here