Page Hero Background Video

Adding a background video to our Page Hero (Header Element) is super easy. We just need to add some HTML into the content area, and add some CSS to our site.

The first thing we need to do is structure our HTML within our Element content. Here’s an example:

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

<div class="background-video-content">
    Your Element content in here.
</div>

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.

Now that our HTML is set up, we can add the CSS:

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

.page-hero {
    position: relative;
    overflow: hidden;
}

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