Background Video

Adding a background video with blocks is super easy. The method below can be applied to a static page content or a block element page hero.

Step 1:

Add a Container block, then add a Custom HTML block inside it with the HTML below:

<video loop muted autoplay playsinline poster="URL/TO/poster.jpg" class="background-video">
    <source src="URL/TO/video.mp4" type="video/mp4">
    <source src="URL/TO/video.webm" type="video/webm"> 
    <source src="URL/TO/video.ogv" type="video/ogv">
</video>

In the HTML above, you’ll notice a couple different options we’ve added:

• loop – This will make the video loop infinitely.
• muted – This will mute any sound the video might have.
• autoplay – This will make the video start playing as soon as the page loads.
• playsinline – This will make the video auto play on mobile.
• poster – This is the URL to a fallback image that will show while the video loads.

You’ll also notice we have three different videos within our video element. Only one is required.

Step 2:

Set Outer z-index of the Container block to 1.

Step 3:

Give the Headline block an additional CSS class: background-video-content.

Note: the Headline block is only necessary if you want to add text on top of the background video.

Step 4:

Now we can add the CSS:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

All of the above is plug-and-play, except for the opacity option. Adding the opacity will allow your background color to overlay the video element.