Fullscreen Video Background using HTML and CSS
Preview Live Preview Download Download Code

Fullscreen Video Background using HTML and CSS

Adding a responsive fullscreen video background to the website is one of the best ways to improve its look - from my experience, people actually love this effect! Whatsmore, this will also help you to keep users engaged for a bit longer with your website. In today's tutorial, we will show you how to create a fullscreen video background using HTML and CSS, so without further ado, let's code it!

Step 1: Choosing a fullscreen video background

At first, we have to find a perfect video, which we will be using as a background. There are no limits to what you can use, however, be sure to find a video that isn't too long - it may slow down your website, which would hurt users' experience. Personally, I will use a video from Pexels, which I will place in the newly created "assets" folder in our project. We also need a poster image, which will be used while the video is loading - I highly recommend using the first frame of the video for the smoothest result.

Step 2: Setting up the HTML code for Fullscreen Video Background

As always we are going to start from scratch, so let's generate a boilerplate (with Visual Studio Code you can do this by simply writing "!" in the index.html file), change the title, and link style.css in the head section - nothing hard so far. Then in the body, we are going to add a header element. Inside it, we will create two elements, the first one will be a video tag with a class name of "background-video" and the second one will be a div with the "text" class name. You probably already know what they will be used for, don't you? So, a video tag with a "background-video" class, will have a couple of attributes:

  • playsinline - video will be played within a container instead of taking the entire screen on mobile phones;
  • autoplay - it will start the video automatically once the page loads;
  • muted - it will turn off the sound of the video, let's be honest, we all hate websites that play music/sounds when we don't ask them to do so, therefore muting it is a good idea;
  • loop - it will play the video in the infinite loop;
  • poster - the image that is shown to the user when the video is still loading or doesn't load for some reason. 
<video
  class="background-video"
  playsinline
  autoplay
  muted
  loop
  poster="assets/background-poster.jpg"
>
  <source src="assets/background-video.mp4" type="video/mp4" />
</video>

Now it's time to fill the second element with some code and since it will serve as a div with content we will put an H1 heading with a "text-heading" class, a paragraph with a class of "text-lead" and at the bottom, we will have an anchor with "btn" class. 

<div class="text">
  <h1 class="text-heading">Fullscreen Video Background</h1>
  <p class="text-lead">Beautiful and easy to do effect!</p>
  <a href="#" class="btn">Discover more</a>
</div>

Below is the final HTML code for Fullscreen Video Background, just copy and paste it into the index.html and let's move to the next step: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Fullscreen Video Background using HTML and CSS</title>
  </head>
  <body>
    <header>
      <video
        class="background-video"
        playsinline
        autoplay
        muted
        loop
        poster="assets/background-poster.jpg"
      >
        <source src="assets/background-video.mp4" type="video/mp4" />
      </video>
      <div class="text">
        <h1 class="text-heading">Fullscreen Video Background</h1>
        <p class="text-lead">Beautiful and easy to do effect!</p>
        <a href="#" class="btn">Discover more</a>
      </div>
    </header>
  </body>
</html>

Step 3: Styling the Fullscreen Video Background with CSS

At first, we will import a nice-looking font from Google Fonts - in this project I will use Lato, but of course, you can use whichever you like. As always we are going to reset the padding, margin and change box-sizing to border-box. If it comes to the styling header, which works as a container for both, a video and text- we will make it fullscreen by changing the height to 100 viewport height, center the content using Grid, and add some nice horizontal padding. We also need to change the position of this element to relative - we do it to prevent a video from overlapping the content above this element. 

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
}

header {
  position: relative;
  height: 100vh;
  display: grid;
  place-content: center;
  color: #eaf2ef;
  padding: 0 1rem;
}

After that we will finally move to make a fullscreen background video with CSS, so let's target a background-video class. We need to change the position from static to absolute, set up a top and left position to 0, and change the width and height to 100%, so it will take a full screen. To be sure it won't overlay anything we have to change the z-index to -1. In the end, to make background video responsive we will change the object-fit to cover - it will automatically resize the video while keeping the original aspect ratio to fill the whole screen, so don't worry about people using it on mobile phones. 

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  object-fit: cover;
}

Now let's add an overlay effect to a video - we will add an ::after pseudo-element to a header element. To actually show it on the screen we have to add an empty content property, position it absolute, set up width and height to 100% so it will also take the full screen, and position it on the top and left corner of the screen. We also want to make it blueish, so the background is #118AB2 and to make it slightly transparent we want to change the opacity to 0.7. To make it overlay the video but not the text content itself we will change the z-index to -1 as well. 

header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #118ab2;
  opacity: 0.7;
}

At the end we want to style the text content - we want to center the text and change it to uppercase. If it comes to H1 which has got a "text-heading" class, we will increase the font size to 3 rem and font weight to 700. A paragraph with a "text-lead" class will have also a 700 font-weight, but the font size will be only 1.25 rem. We will add also a nice 2 rem vertical margin to it. Lastly, we will style our anchor, as you remember it has got a "btn" class. Unfortunately, the default display of the anchor is inline, which doesn't really care about margin, so we want to change it to inline-block. A nice change of background and text color, adding some padding to it and a slight increase in font size and font weight will make it look way better. We also will remove text decoration - you know, this underline while hovering the anchor is not the best-looking effect. 

.text {
  text-align: center;
  text-transform: uppercase;
}

.text .text-heading {
  font-size: 3rem;
  font-weight: 700;
}

.text .text-lead {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0;
}

.text .btn {
  display: inline-block;
  background: #ef476f;
  color: #eaf2ef;
  padding: 1.25rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

You can find final CSS code for Fullscreen Video Background down below: 

/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
}

header {
  position: relative;
  height: 100vh;
  display: grid;
  place-content: center;
  color: #eaf2ef;
  padding: 0 1rem;
}

/* Background Video */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  object-fit: cover;
}

/* Overlay */
header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #118ab2;
  opacity: 0.7;
}

/* Text Content */
.text {
  text-align: center;
  text-transform: uppercase;
}

.text .text-heading {
  font-size: 3rem;
  font-weight: 700;
}

.text .text-lead {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0;
}

.text .btn {
  display: inline-block;
  background: #ef476f;
  color: #eaf2ef;
  padding: 1.25rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

Conclusion - CSS Video Background to keeps user engaged

Within a couple of minutes, we can change the feel of our website, it will look way more modern and professional, so I believe it's worth learning how to do it. After following this tutorial you now know how to create a responsive fullscreen video background using HTML and CSS, so use it wisely, change the video, add more tweaks, and leave a lasting impression on your users!