Skip to main content
All CollectionsImages and ProductsProducts
How to: Add Videos to Your Products Page
How to: Add Videos to Your Products Page

How to: Add Videos to Your Products Page

Samuel Gichuhi avatar
Written by Samuel Gichuhi
Updated over 5 months ago

Content

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
Did this answer your question?