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 videos with controls

Videos with controls allow website visitors to play, pause, adjust volume and more when browsing your website.

How to embed a Youtube video with controls

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. 
4. Copy the full iframe code.
5. Open the Easol dashboard and go to Site and select a page.
6. Locate the block that supports embedded videos or add a new one.
7. Paste the iframe code into the video iframe code field.
8. Click Save to publish changes.

How to embed a Vimeo video with controls

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 Site and select a page.
6. Locate the block that supports embedded videos or add a new one.
7. Paste the iframe code into the video iframe code field.
8. Click Save to publish changes.

How to embed background video

Background videos are a great way to add a dynamic element to your website. To embed background videos:

• Make sure to use blocks that support background videos (e.g. Hero blocks)
• Follow best practices for background videos (see below)
• Adjust iframe code for background display (autoplay, mute sound, loop video, hide controls etc.)

Best practices for background videos

• Use a fallback mobile image - Some mobile devices and browsers block autoplaying videos. For best results, we recommend uploading a fallback background image and hiding background videos for mobile. 
• Keep the video file small - Large video files take longer to load, cause videos to pause mid-stream and slow down overall website loading speed. To prevent this, keep background video lengths under 30 seconds.
• Limit number of background videos per page - Optimise overall page loading speeds by limiting background videos to 2 or fewer videos per page.
• Choose videos with smooth transitions - Avoid quick cuts and excessive flashes to keep your website accessible.
• Add overalying text via site builder - For website accessibility and better SEO, add any overlaying text via the site builder rather than directly embedding text in the video.
• Contrast text colours - Ensure overlaying text is readable by using a text colour that contrasts with the colours of your background video.

How to embed YouTube as an autoplaying video background

To embed YouTube videos as a background, we recommend adjusting the iframe code's parameters to customise the video for background display. Learn more about YouTube's embed parameters.

Adjusted iframe code for Youtube background videos

Below is the iframe code with adjusted parameters for optimal background display:

<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO ID]?controls=0&mute=1&autoplay=1&showinfo=0&loop=1&disablekb=1&modestbranding=0&fs=0&playlist=[VIDEO ID]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 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. 

Embed Vimeo as an autoplaying video background

Similar to YouTube, we recommend adjusting the Vimeo iframe code's parameters for optimal background display. Learn more about Vimeo's embed parameters. 

Adjusted iframe code for Vimeo background videos

Below is the iframe code with adjusted parameters for optimal background display:

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