How To Video Background Website

If you want to engage first-time visitors on your website, y'all have about 10 to 20 seconds. To inject some life into your page content, y'all might desire to try adding a groundwork video with CSS.

person using a laptop to create a video background with html and css

Video backgrounds take upwards the unabridged width and height of the viewport (in other words, the visible page area) and add together some visual flair to heave engagement. Over this video, you tin place your featured page content — later all, it is but a background, and your content is near important.

Download Now: Free HTML & CSS Hacks

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

How to Create a Fullscreen Video Groundwork With CSS

To show you how to create video backgrounds for your site, we'll share some code that you can re-create to modify for your needs. We'll too see the code in action with some responsive video background CodePen modules.

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

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

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

The id attribute is for styling our video element with CSS. This is necessary to attain the fullscreen background effect.
The autoplay attribute starts the video automatically in one case the folio loads.
The loop attribute plays the video in an infinite loop.
The muted attribute turns off sound for the video. Generally, you lot shouldn't play video sound on your page unless the user turns on audio. Doing then is an accessibility issue and can make for an unpleasant user experience.
Finally, the poster image 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 image the commencement frame of your video for the smoothest look.

<video> tags usually include the controls attribute also. However, we've left it out considering we don't want users pausing the video or skipping effectually.

Subsequently 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'southward handle the CSS business organisation. To turn our normal video into a groundwork video, add the following CSS:

                              
#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: embrace;
  position: fixed;
  left: 0;
  right: 0;
  summit: 0;
  lesser: 0;
  z-index: -1;
}

Let's become through each of these rules to understand what they do:

height: 100vw (viewport width) and width: 100vh (viewport superlative) make the video extend to the total width and height of the viewport.
object-fit: cover automatically sizes the background video to keep its original attribute ratio while filling the screen, clipping out edges of the video when necessary.
position: stock-still and the following left, right, elevation, and bottom position the video relative to the viewport and separates it from the rest of the page content. This keeps the video in identify when the user scrolls, and allows other content to sit on acme of it.
z-alphabetize places the video background nether accompanying content.

Next, we'll add some styling for our other folio content. For accessibility, make sure text placed over video provides ample color contrast with the background:

                              
h1, h2 {
  colour: white;
  font-family: Trebuchet MS;
  font-weight: assuming;
  text-marshal: eye;
}h1 {
  font-size: 6rem;
  margin-top: 30vh;
}
                h2 { font-size: 3rem; }

At this betoken, the video background will display nicely. Merely, we haven't accounted for mobile devices yet. Information technology's usually a good idea to prevent machine-playing videos on mobile, since the information needed to play them is significant and users didn't asking to play the video in the get-go place.

Instead, we'll add a media query that substitutes the video with our poster paradigm 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 paradigm on mobile devices. (Note: Click hither to see the instance with the video playing.)

See the Pen Video Background ane by Christina Perricone (@hubspot) on CodePen.

If you lot demand more assist learning how to make this code work for your site, check out this CSS background 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 volition 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 volition cover the video to bring the focus to your main content. (Note: Click here to run into the example with the video playing.)

See the Pen Video Background two past Christina Perricone (@hubspot) on CodePen.

Nosotros've given our <master> element a groundwork color to cover up the video, every bit well as a top margin in viewport top units. This way, the main content will appear as presently 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'due south background for a video might not be the ideal option 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 tin can brand quite an impact, and there's no need to even push play.

Editor'southward note: This postal service was originally published in June 2021 and has been updated for comprehensiveness.

New Call-to-action