Contents

If you have shorter videos, you can now upload them directly onto your site and embed them from there, allowing you to no longer have to put up with the post-video options that videos hosted on Youtube display after they’ve finished.

The only two limitations of this are that the video needs to be under 100MB in size, and it should be saved as an MP4. (Please keep in mind that it’s not possible to determine the length of the video that can be saved at that file size as that also depends on the resolution of the video, and how it’s been compressed)

Starting in the Site Manager, click on the Jump To menu on the top-right, and select Extra Files from near the bottom of the list.

From here you’ll be able to see the files which have been uploaded to your site. To upload your video, click on the Add Photos button and select the MP4 file to start it uploading.

Once it has been uploaded, it will be added as the first file in the list.

You’ll need two things for this. The first is some basic custom code to which will be added to the address of the video which you just uploaded, and the second is the site Embed Responsively which will turn the static code into something which will resize correctly and automatically when viewed on a mobile device like your phone.

The custom code to be used here is as follows:

Next we’ll need to copy the url of the uploaded video. Right-click on the Copy URL link just above the thumbnail of the video, and click on Copy Link Address.

With the address of the video copied, we can now add this to the code from above, replacing the “video_url” section. Using my video, it becomes this:

Now we need to run this code through Embed Responsively, which you can reach here: http://embedresponsively.com

Now, there isn’t an option specifically for Art Storefronts, but all you need to use is the Generic iFrame option. Click on this and if you copy the custom code from above (with the link to your video, not my example video), you can paste it into the field labelled Generic iFrame Embed. Then click on the Embed button to generate the responsive code that you will need.
​
​

If you scroll down the page, you’ll see the code which you will need to add to your site to display your video.

If you wish to embed your video on a Standard Page using the Standard editor, you can do this quite easily. First start by opening your page in the Site Manager, and go to the Content tab.

You should check that the Standard Editor is enabled before you do anything else. If it’s showing the Onsite Content Builder, change it to the Standard Editor, then click on Save.

Now we’re going to go back to the code generated from Embed Responsively, and highlight and copy it.

Go back to the Standard Page, and scroll down until you see the Standard Editor Window. Click on the Source button on the top left.

Paste the code into the main editor window below (this will all go into one line), then click on Save on the bottom right. Once you get the confirmation that the save has been completed, click on Preview Site on the middle bottom.

The Live Site version of the page will load, and you will be able to see your video ready to play.

You can also open this page on your mobile device to check that it’s being displayed correctly, without shifting the page content above or below the video to the left.

If you wish to embed your video on a Standard Page using the Onsite Content Builder, this is very straightforward. First start by opening your page in the Site Manager, and go to the Content tab.
​
​

You should check that the Standard Editor is enabled before you do anything else. If it’s showing the Onsite Content Builder, change it to the Standard Editor, then click on Save and reload the page. Once the page has reloaded, you can click on the Click Here link under the selection box, and open the Live Site page with the Content Builder UI showing.

​

Now we’re going to go back to the code generated from Embed Responsively, and highlight and copy it.

Go back to the Standard Page, and click on +Add on the right-hand side of the window.

In the dialogue window that opens over top of the page, make sure you’re on the Basic section at the top of the window, and click the <-> HTML, JS, CSS button on the bottom right of the list.

This will add a block which starts with HELLO WORLD..! in bold.

Now click in the block, and a gear icon will appear in the upper right of the click. Click on this, and it will display the code inside this block, which we are about to replace.
​
​

Highlight the and remove the code in this field, and replace it with the code from Embed Responsively.

Click on the OK button on the bottom right of the text field.

The embedded video will now load on the page. Now click on Save Content to store the changes that you’ve made to the page.

You can also open this page on your mobile device to check that it’s being displayed correctly, without shifting the page content above or below the video to the left.
​

If you wish to embed your video in an Experience Page, this is a bit more involved. First start by opening your Experience Page in the Site Manager, go to the Content tab, and then click on Click Here to open the page for editing..

When you have the Experience Page open, click on the + on the top left, then select Custom under Simple Start of the top left, and select one of the full-screen elements on the left side of the displayed options if you wish to embed a landscape-formatted video (wider than it is tall).

If you’re trying to upload a portrait-formatted video (taller than it is wide) you could try one of the other four options, but be aware that it may be automatically cropped to fit the browser window.

Now, when you’ve selected the block you wish to add, you’ll be returned to the page with the block active. At the bottom of the block are Wrench and Gear icons. Click on the Gear icon to open the module settings.

This will open a dialogue window displaying the code which is currently generating the background animation.
​
​

Now we’re going to go back to the code generated from Embed Responsively, and highlight and copy it.

Go back to the Experience Page and remove the code in this field, and replace it with the code from Embed Responsively, and then click on OK.

The embedded video will now be displayed on the page. Now click on Save Content to store the changes that you’ve made to the page.

You can also open this page on your mobile device to check that it’s being displayed correctly, without shifting the page content above or below the video to the left.