After our video element, let’s add some HTML filler content to see how text appears against our video background.
<h1>THIS IS A RIVER.</h1>
<h2>How majestic.</h2>
With the HTML done, let’s handle the CSS business. To turn our normal video into a background video, add the following CSS:
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
Let’s go through each of these rules to understand what they do:
- height: 100vw (viewport width) and width: 100vh (viewport height) make the video extend to the full width and height of the viewport.
- object-fit: cover automatically sizes the background video to keep its original aspect ratio while filling the screen, clipping out edges of the video when necessary.
- position: fixed and the following left, right, top, and bottom position the video relative to the viewport and separates it from the rest of the page content. This keeps the video in place when the user scrolls, and allows other content to sit on top of it.
- z-index places the video background under accompanying content.
Next, we’ll add some styling for our other page content. For accessibility, make sure text placed over video provides ample color contrast with the background:
h1, h2 {
color: white;
font-family: Trebuchet MS;
font-weight: bold;
text-align: center;
}
h1 {
font-size: 6rem;
margin-top: 30vh;
}
h2 { font-size: 3rem; }
At this point, the video background will display nicely. But, we haven’t accounted for mobile devices yet. It’s usually a good idea to prevent auto-playing videos on mobile, since the data needed to play them is significant and users didn’t request to play the video in the first place.
Instead, we’ll add a media query that substitutes the video with our poster image on screens 750 pixels wide or smaller.
@media (max-width: 750px) {
#background-video { display: none; }
body {
background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
background-size: cover;
}
}
When we combine everything, we get a sleek video background that scales with the screen and displays an image on mobile devices. (Note: Click here to see the example with the video playing.)
See the Pen Video Background 1 by Christina Perricone (@hubspot) on CodePen.
If you need more help learning how to make this code work for your site, check out this CSS background YouTube video tutorial:
Add More Page Content
We’ve already put some headings on the page to see how content looks against a video background.
Still, your page will probably contain more content than a video background and some title text. So, let’s add a <main> section to our example that appears when the user scrolls down. This element will cover the video to bring the focus to your main content. (Note: Click here to see the example with the video playing.)
See the Pen Video Background 2 by Christina Perricone (@hubspot) on CodePen.
We’ve given our <main> element a background color to cover up the video, as well as a top margin in viewport height units. This way, the main content will appear as soon as the user starts scrolling.
A CSS Video Background to Engage Your Audience
Life is short, and nobody wants to waste their time on a run-of-the-mill webpage. With just a few lines of CSS, we’ve created a full-page video background template that you can customize for your audience.
Using a site's background for a video might not be the ideal choice for every website, and are usually a no-go on mobile websites due to their impact on mobile performance. However, if done well, video backgrounds can make quite an impact, and there’s no need to even push play.
Editor's note: This post was originally published in June 2021 and has been updated for comprehensiveness.