How To Add Video In The Background Of Htm Page

If you lot want to engage first-time visitors on your website, you take virtually ten to 20 seconds. To inject some life into your page content, you might desire to try adding a background video with CSS.

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

Download Now: Free HTML & CSS Hacks

Video backgrounds may seem like a fancy characteristic, but they're actually easy to implement if y'all know some CSS. In this guide, nosotros'll testify you lot how to add together a simple fullscreen video background to your webpage, which y'all tin tweak and adapt to your needs.

How to Create a Fullscreen Video Background With CSS

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

Allow'south start with our HTML. First, we'll identify a video on our folio with the <video> tag and several attributes.

                                          
<video id="background-video" autoplay loop muted poster="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 equally intended, and so let'southward go through each i:

The id attribute is for styling our video chemical element with CSS. This is necessary to achieve the fullscreen background effect.
The autoplay aspect starts the video automatically once the page loads.
The loop attribute plays the video in an infinite loop.
The muted attribute turns off sound for the video. By and large, you lot shouldn't play video audio on your folio unless the user turns on sound. Doing so is an accessibility issue and can make for an unpleasant user experience.
Finally, the poster paradigm 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 offset frame of your video for the smoothest wait.

<video> tags ordinarily include the controls aspect also. Even so, 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 meet how text appears against our video background.

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

With the HTML done, permit'southward handle the CSS business. To turn our normal video into a groundwork video, add the following CSS:

                                          
#background-video {
  width: 100vw;
  summit: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  correct: 0;
  acme: 0;
  bottom: 0;
  z-index: -1;
}

Let's go through each of these rules to understand what they practise:

height: 100vw (viewport width) and width: 100vh (viewport height) make the video extend to the full width and height of the viewport.
object-fit: comprehend automatically sizes the groundwork video to go along its original aspect ratio while filling the screen, clipping out edges of the video when necessary.
position: stock-still and the following left, right, top, and bottom position the video relative to the viewport and separates it from the remainder of the folio content. This keeps the video in place when the user scrolls, and allows other content to sit on top of it.
z-alphabetize places the video background under accompanying content.

Next, we'll add some styling for our other page content. For accessibility, brand sure text placed over video provides ample color dissimilarity with the groundwork:

                                          
h1, h2 {
  color: white;
  font-family unit: Trebuchet MS;
  font-weight: bold;
  text-marshal: eye;
}h1 {
  font-size: 6rem;
  margin-pinnacle: 30vh;
}
                      h2 { font-size: 3rem; }

At this signal, the video background will brandish nicely. But, nosotros 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 get-go place.

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

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

When we combine everything, we get a sleek video groundwork that scales with the screen and displays an epitome on mobile devices. (Notation: Click hither to run into the example with the video playing.)

Encounter the Pen Video Background 1 by Christina Perricone (@hubspot) on CodePen.

If you lot demand more than aid learning how to make this code piece of work for your site, cheque out this CSS background YouTube video tutorial:

Add More Page Content

We've already put some headings on the page to run across how content looks confronting a video background.

Even so, your folio volition probably contain more than content than a video background and some title text. And then, let's add together a <main> section to our example that appears when the user scrolls down. This chemical element will cover the video to bring the focus to your main content. (Note: Click here to see the instance with the video playing.)

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

We've given our <main> element a background color to cover upwardly the video, equally well as a acme margin in viewport height units. This style, the main content will appear as shortly as the user starts scrolling.

A CSS Video Background to Engage Your Audition

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

Using a site's groundwork for a video might not be the platonic selection for every website, and are ordinarily a no-continue mobile websites due to their bear on on mobile performance. Yet, if done well, video backgrounds can make quite an impact, and in that location's no need to even push play.

Editor's note: This post was originally published in June 2021 and has been updated for comprehensiveness.

New Call-to-action