How to Create a Video Background With CSS

If you want to engage first-time visitors on your website,you have about 10 to 20 seconds to do so. Life is short, and nobody wants to waste their time on a run-of-the-mill webpage. So, how can we inject some life into our page content in a way that captures visitors’ attention and keeps them scrolling?

One option is adding a video to your website in the background. Video backgrounds take up the entire width and height of the viewport (in other words, the visible page area) and add some visual flair to boost engagement. Over this video, you can place your featured page content — after all, it is just a background, and your content is most important.

Video backgrounds may seem like a fancy feature, but they’re actually quite easy to implement if you know someCSS. In this guide, we’ll show you how to add a simple fullscreen video background to your webpage, which you can tweak and adapt to your needs.

How to Create a Fullscreen Video Background With CSS

Let’s start with our HTML. First, we’ll place a video on our page with the<六世deo>tag and several attributes.


<六世deo id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">

All of these attributes are important for the background to work as intended, so let’s go through each one:

Theidattribute is for styling our video element with CSS. This is necessary to achieve the fullscreen background effect.
Theautoplay属性一旦自动启动视频page loads.
Theloopattribute plays the video in an infinite loop.
Themutedattribute turns off sound for the video. Refrain from playing video sound on your page unless initiated by the user. Doing so presents an accessibility issue and a potentially unpleasant user experience.
Finally, theposterimage is shown on the screen as the video is loading, or in place of the video if it doesn’t load. We recommend making your poster image the first frame of your video for the smoothest look.

<六世deo>tags usually include thecontrolsattribute as well. However, we’ve left it out because we don’t want users pausing the video or skipping around.

After our video element, let’s add some HTML filler content to see how text appears against our video background.


THIS IS A RIVER.

How majestic.

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) andwidth: 100vh(viewport height) make the video extend to the full width and height of the viewport.
object-fit: coverautomatically sizes the background video to keep its original aspect ratio while filling the screen, clipping out edges of the video when necessary.
position: fixedand the followingleft,right,top, andbottomposition 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-indexplaces 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 PenVideo Background 1by Christina Perricone (@hubspot) onCodePen.

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

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 PenVideo Background 2by Christina Perricone (@hubspot) onCodePen.

We’ve given our

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.

CSS背景视频吸引你的听众

With just a few lines of CSS, we’ve created a full-page video background template that you can customize for your audience. Video backgrounds might not be perfect for every website, and are usually a no-go on mobile websites. However, if done well, they can make quite an impact, and there’s no need to push play.