Adding a background video to our Page Hero 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:
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.
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.