Art Storefronts Support Center

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

How to embed video uploaded to Extra Files

Follow

Contents

  1. Overview
  2. How to upload a video to Extra Files on your site
  3. How to generate the embed code for your uploaded video
  4. How to embed an uploaded video on a Standard Page with the Standard Editor
  5. How to embed an uploaded video on a Standard Page with the Onsite Content Builder
  6. How to embed an uploaded video on an Experience page

Overview

 

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)



How to upload a video to Extra Files on your site

 

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.

mceclip0.png

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.


mceclip1.png

 

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


mceclip2.png

How to generate the embed code for your uploaded video

 

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:

<p>

<video controls="" height=max-height width="100%"><source src="video_url" type="video/mp4" />
Your browser does not support the video tag.
</video>

</p>

 

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.


mceclip3.png

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:

 

<p>

<video controls="" height=max-height width="100%">
<source src="https://images.discerningassets.com/video/upload/v1611608444/VID_20210123_043409_hmrslw.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

</p>

 

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


mceclip4.png

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.

mceclip5.png

 

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


mceclip6.png

Important: Keep this page open, as you’ll need to come back here and copy this code later.



How to embed an uploaded video on a Standard Page with the Standard Editor

 

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.


mceclip7.png

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.

 

mceclip8.png

 

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


mceclip9.png

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.


mceclip10.png

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.

mceclip11.png

 

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


mceclip12.png

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.


mceclip13.png

How to embed an uploaded video on a Standard Page with the Onsite Content Builder

 

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.

mceclip14.png

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. 



mceclip15.png


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


mceclip16.png


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


mceclip17.png

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.


mceclip18.png

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


mceclip19.png

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.

mceclip20.png

 

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


mceclip21.png

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


mceclip22.png

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.


mceclip23.png

 

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.
mceclip24.png



 

How to embed an uploaded video on an Experience page

 

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..


mceclip25.png

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.


mceclip26.png

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.


mceclip27.png


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

mceclip28.png

 

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


mceclip29.png

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.


mceclip30.png

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.

mceclip31.png

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.

mceclip32.png




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