If you want to appoint beginning-fourth dimension visitors on your website, yous have about x to 20 seconds. To inject some life into your folio content, you might want to try adding a background video with CSS.

Video backgrounds take upwards the entire width and pinnacle 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.

Download Now: Free HTML & CSS Hacks

Video backgrounds may seem like a fancy feature, merely they're actually piece of cake to implement if y'all know some CSS. In this guide, we'll show you lot how to add a simple fullscreen video groundwork to your webpage, which you can tweak and adapt to your needs.

How to Create a Fullscreen Video Background With CSS

To prove you how to create video backgrounds for your site, we'll share some code that yous tin can copy to alter for your needs. We'll also come across the code in activity with some responsive video background CodePen modules.

Let's showtime with our HTML. Kickoff, we'll place a video on our folio with the <video> tag and several attributes.

                                          
<video id="groundwork-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
<source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>

All of these attributes are important for the groundwork to work as intended, and so allow'southward get through each one:

  • The id attribute is for styling our video element with CSS. This is necessary to achieve the fullscreen groundwork effect.
  • The autoplay aspect starts the video automatically in one case the folio loads.
  • The loop attribute plays the video in an infinite loop.
  • The muted aspect turns off sound for the video. Generally, you shouldn't play video sound on your folio unless the user turns on sound. Doing and so is an accessibility issue and can brand for an unpleasant user feel.
  • Finally, the affiche prototype is shown on the screen as the video is loading, or in place of the video if information technology doesn't load. We recommend making your poster paradigm the first frame of your video for the smoothest wait.

<video> tags ordinarily include the controls aspect as well. However, we've left it out because we don't desire users pausing the video or skipping effectually.

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

                                          
<h1>THIS IS A RIVER.</h1>
<h2>How royal.</h2>

With the HTML done, let's handle the CSS business. To turn our normal video into a groundwork video, add the post-obit CSS:

                                          
#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

Allow's go through each of these rules to understand what they practice:

  • height: 100vw (viewport width) and width: 100vh (viewport height) make the video extend to the total width and tiptop of the viewport.
  • object-fit: cover automatically sizes the background video to go on its original aspect ratio while filling the screen, clipping out edges of the video when necessary.
  • position: fixed and the following left, right, summit, and bottom position the video relative to the viewport and separates it from the balance of the page content. This keeps the video in identify when the user scrolls, and allows other content to sit on top of it.
  • z-index places the video groundwork under accompanying content.

Adjacent, nosotros'll add some styling for our other page content. For accessibility, brand certain 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-height: 30vh;
}
                      
h2 { font-size: 3rem; }

At this point, the video background will brandish nicely. Only, we oasis't accounted for mobile devices yet. It's usually a good thought to prevent auto-playing videos on mobile, since the data needed to play them is pregnant and users didn't request to play the video in the outset place.

Instead, nosotros'll add together a media query that substitutes the video with our poster image on screens 750 pixels wide or smaller.

                                          
@media (max-width: 750px) {
    #groundwork-video { display: none; }
    trunk {
      background: url("https://avails.codepen.io/6093409/river.jpg") no-repeat;
      background-size: cover;
    }
}

When we combine everything, nosotros 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 than help learning how to brand this code piece of work for your site, check out this CSS groundwork YouTube video tutorial:

Add More Page Content

Nosotros'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. And then, let's add a <primary> section to our case that appears when the user scrolls downwardly. This element will cover the video to bring the focus to your principal content. (Notation: Click hither to run into the example with the video playing.)

See the Pen Video Groundwork 2 past Christina Perricone (@hubspot) on CodePen.

We've given our <chief> element a background colour to encompass upwardly the video, as well as a top margin in viewport height units. This way, the master content volition appear as soon as the user starts scrolling.

A CSS Video Background to Engage Your Audience

Life is short, and nobody wants to waste material their time on a run-of-the-mill webpage. With but a few lines of CSS, we've created a full-page video background template that you can customize for your audience.

Using a site'southward groundwork for a video might not exist the ideal choice for every website, and are usually a no-go on mobile websites due to their affect on mobile performance. Notwithstanding, if done well, video backgrounds can make quite an affect, and there's no need to even button play.

Editor'south notation: This mail service was originally published in June 2021 and has been updated for comprehensiveness.

New Call-to-action

css introduction

Originally published Apr 27, 2022 7:00:00 AM, updated May sixteen 2022