Display videos on your website

To add videos to your website, you will need to host them on a third-party platform, such as Vimeo or YouTube, and then embed an iframe. Hosting your videos on a third-party platform will help ensure your website loads faster for a better user experience. Before you start, make sure that your website theme supports blocks with video embeds. 

Theme blocks that support video embed

How to embed a Youtube video

1. If you haven’t already, upload your video to YouTube. Ensure that it’s published and set as “Public”.
2. Open your video on Youtube and click Share. 
3. Select the Embed option. By default, video controls will be displayed in the embed. To hide them, uncheck the Show player controls setting.
4. Copy the full iframe code.
5. Open the Easol dashboard and go to My site > Pages. Locate the block that supports embedded videos or add a new one.
6. Paste the iframe code into the video iframe code.
7. Click Save to publish changes.

Embed YouTube as an autoplaying video background

Some blocks allow you to embed videos as backgrounds (e.g. Hero blocks). For optimal display, we recommend using the modified iframe code below to ensure the YouTube video is muted, loops, autoplays and controls are hidden.

iframe code for Youtube background videos

<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO ID]?mute=1&autoplay=1&controls=0&showinfo=0&loop=1&playlist=[VIDEO ID]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Replace [VIDEO ID] with the ID of your YouTube video. To find the ID, go to your video on YouTube and click Share. The string of letters and numbers after https://youtu.be/ is the ID. 

How to embed a Vimeo video

1. If you haven’t already, upload your video to Vimeo. Ensure that it’s published and set as “Anyone can see this video”.
2. Open your video on Vimeo and click Share.
3. If you want to customise the display of the video, such as show/hide bylines, click Show options.
4. Copy the full iframe code.
5. Open the Easol dashboard and go to My site > Pages. Locate the block that supports embedded videos or add a new one.
6. Paste the iframe code into the video iframe code.
7. Click Save to publish changes.

Embed Vimeo as an autoplaying video background

Some blocks allow you to embed videos as backgrounds (e.g. Hero blocks). For optimal display, we recommend using the modified iframe code below to ensure the Vimeo video is muted, loops, autoplays and controls are hidden.

iframe code for Vimeo background videos

<iframe src="https://player.vimeo.com/video/[VIDEO ID]?autoplay=1&loop=1&title=0&byline=0&portrait=0&showinfo=0&background=1&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Replace [VIDEO ID] with the ID of your Vimeo video. To find the ID, go to your video on Vimeo and copy the string of letters and numbers after https://vimeo.com/ in the URL.