How to have a video as background

Having video as a background on your website can add a cool effect to how the page looks due to the movement in the video.

Keep in mind, not to overuse this. Since videos are bigger than images, your website can slow down if you have too many video backgrounds. Personally, if I do use an HTML5 video background, I have 1 video max on a page.

A good website to find free stock footage for your video background is coverr.co.

If you just want the code, feel free to see my codepen here.

Video Background

1. We will start with a container for the video. Let's put the a video container div in a section.

   
    <section>
   
        <div class = "video-container">
        </div>
   
    </section>
   
   

2. Inside this video-container, use the HTML5 video tags. Notice we won't be specifying the src here. Instead, we will use the <source> children element. The reason is that we want to be able to specify different sources for the video in case one is not recognized by the browser.

   In the video tags, use autoplay, muted, and loop. Since this is a background video you want it to play automatically, loop, and not play any sounds hence the autoplay, loop, and muted attributes.

   In my case, I have the videos in an img folder.

   
       <section>
   
           <div class = "video-container">
   
               <video class="video" autoplay muted loop>
                   <source src="img/video.mp4" type="video/mp4" />
                   <source src="img/video.webm" type="video/webm" />
               </video>
   
           </div>
   
       </section>
   
   

   The browser will use the first source it has the ability to play. So if the browser can play the mp4 video then it will use that, if not it will try using the webm video.

3. Now we will style the section and container so that it takes up the entire height and width and goes behind everything so that you can have elements over the video.

   
          section {
            position: relative;
            height: 90vh;
          }
   
          .video-container {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -1;
            opacity: 0.2;
            overflow: hidden;
          }
   
          .video {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
   
   

   This is basic css but I will explain. The section is display relative since the video-container is position:absolute. This makes it so that the video-container is positioned inside the section.

   We make the video-container full height and width by setting the top, bottom, left, right properties.

   Then we set the z-index to -1 so that the video is always behind everything. The opacity is set to .2 so that it's not so prominent. Lastly, overflow hidden to make sure it never overflows.

   Then for the video itself, the height and width are also 100% and VERY IMPORTANTLY, the object-fit to cover so that it covers the entire background while keeping its aspect ratio.

   ---

   That's it, you that's all you need to have a video background. If you want to see an example video background see this codepen I made