- Adding video uploaded to Extra Files to a product description
- Adding video uploaded to YouTube to a product description
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:
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.
Once the page has loaded, click on the Add Photos button to select your MP4 video, then click on OK to start it uploading.
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.
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.
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.
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.
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.
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.
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.
Scroll down from here, and locate the Short Description field.
Click on the Source button in the upper-left of the editor window.
Paste the code from Embed Responsively into this field, and then click on Save.
Now click on the Source button again, and you’ll see the top of your video in the editor window.
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.
You can also open the product page on your mobile device, and check the video there. (You may need to scroll down a little)
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.
In the pop-up window that is displayed, click on the COPY link to copy the address of this video to use later.
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.
Click on the Embed button, and you’ll see the player window appear beneath the URL field.
Now scroll down the page, and you need to highlight and copy all of the text in the Embed code text area.
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.
Scroll down until you can see the Short Description section, and click on the Source button in the upper left corner of the editor.
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)
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.
You can see the embedded video on the right hand side of the product page, below the product title, and above the product options.
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.