If you have a video uploaded to YouTube which you wish to share, it’s quite easy to embed this on your Art Storefronts site. In this article we’re going to cover how to do this using the Standard Editor, on a Standard Page or Blog Post using the Onsite Content Builder, and on an Experience Page using its Page Builder.

To generate the link you will need to embed your YouTube video, you’ll need to 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.

If you wish to embed your video on a Standard Page using the Standard editor, you can do this quite easily.

First you’ll need to open your site, and find the editor window where you wish to set up your video. The editor window is displayed on Standard Pages, Product Pages, Gallery Pages, and Form Pages, and looks like this:
​
​

To add the embed code to this page, we’ll start by switching the editor into Source mode by clicking on the button on the upper left of the editor. This switches the editor to display the HTML which generates whatever is being displayed in the editor window normally.

You will need to generate a little bit of custom code which will take the link for your video, and create embed code which is “responsive”, allowing it to resize correctly when you view your site on a mobile device like your phone.

To do this you will need need to run the link to your video through the Embed Responsively website, which you’ll find here: http://embedresponsively.com

Paste the address of your YouTube video into the text field, and then click on the Embed button to generate the responsive code that you will need.

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

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

Go back to the editor window on the page you have open, and paste it into the editor (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 compressing content on the left side of the page which is above or below the video.
​
​

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 On-site Content Builder is enabled before you do anything else. If it’s showing the Standard Editor, change it to the Content Builder, then click on Save to switch the page over.

Click on the Click Here link under the selection box, and open the Live Site page with the Content Builder UI showing.
​
​

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 empty YouTube player button near the bottom of the list.

This will add a block containing a default YouTube video which we’ll be replacing.

Click in the player window, and a Link icon will appear in the upper right of the block.

​
Click on this, and it will display the link to the current YouTube video which we are about to replace.

Paste the link to your YouTube video into this field, then click on OK.

Your video will now be displayed in the player window. Now click on Save Content to save 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 on the top left.

For landscape video (video which is wider than it is tall), you’ll most likely find one of the full-width elements will look best (outlined in red below). The one without text will likely suit most purposes.

If you’re trying to upload a portrait-formatted video (taller than it is wide) you could try one of the other options, but be aware that it will be resized to the page, and you may find the top and bottom portions will be cropped.

Now, when you’ve selected the block you wish to add, you’ll be returned to the page with the block active. Click anywhere in the window to select it, and at the bottom of the block you’ll see 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 what is being displayed in this block.

We’re now going to need to generate some code to add to the site here, and for this you’ll need to go to Embed Responsively at http://embedresponsively.com

On this page, make sure you’re on the YouTube tab, paste the address of your YouTube video into the Youtube Page URL field, then click on Embed.

Now scroll down to the bottom of the page, and highlight and copy all of the text in the Embed code field.

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. Click on Save Content to save 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.