Add a video background in HTML/CSS

Hey fellow creators,

Here's a simple tutorial on how to add a video background to your website ! You'll learn all the tips and tricks to make it responsive.

If you prefer to watch the video version, it's right here :

1. The basic structure of your code.

Let's imagine a restaurant asked us to create a nice website. Create a HTML file, with only the head for now. You can add a font that you like or use the one I found:

<!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" />
    <title>Video Background</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Roboto&display=swap"
      rel="stylesheet"
    />
  </head>
</html>

Create a CSS file, in which you'll simply reset the values and add the font for now:

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

body {
  font-family: Playfair Display, sans-serif;
  background: #f1f1f1;
}

2. Add the video to your HTML!

Now you need to create a body, inside of which will be the video tag, which will ask for a source which you can add as a tag, however you need to add some attributes like autoplay (it'll play the video automatically), muted (to mute the sound of the video if it has one) and loop(it'll repeat the video infinitely):

<body>
      <div class="home">
        <video autoplay muted loop>
          <source src="ressources/cooking.mp4" type="video/mp4" />
        </video>
      </div>
  </body>

You'll need to add the video in your ressources folder, which is what I did.

As you can see, it works! However, there are scroll bars on the side and bottom of the screen and the video is too light, so that if you add text on top of it, the text will be hard to read. Let's change all of that!

3. Add an overlay with some text.

Let's add an overlay beneath the video that will have some text in order to showcase the restaurant:

<div class="overlay"></div>
<div class="home-content">
     <h1>High-End Kitchen.</h1>
     <div class="middle-line"></div>
     <button>DISCOVER</button>
</div>

4. Let's style the page!

Go to your CSS file and start by creating a container with a height of 100vh (in order to take up the whole screen) and position relative, since some elements (children of this container) will be absolute.

.home {
  height: 100vh;
  position: relative;
}

Now let's deal with the video:

video {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

It's now taking the full width and height of the viewport, meaning that you no longer have scroll bars on the side and bottom of the page!

Now let's darken the video with the overlay:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  background: rgba(0,0,0,0.6);
}

As you can see, you can either use:

width: 100%;
height: 100%;

 top: 0;
 left: 0;
 bottom: 0;
 right: 0;

It does the exact same thing, since it pins your element to all corners of the screen! This is just a little trick for you to know.

Now let's style the content by increasing the size of the title and the button, organising it to the middle of the screen and creating the divide vertical line between the title and the button:

.home-content {
  width: 600px;
  margin: 0 auto;
  position: relative;
  top: 150px;
  color: #fff;
  z-index: 3;
}

.home-content h1 {
  font-family: Playfair Display, serif;
  text-align: center;
  text-transform: uppercase;
  font-size: 85px;
  line-height: 1.1;
}

.middle-line {
  height: 200px;
  width: 2px;
  background: #fff;
  margin: 40px auto;
}

.home-content button {
  display: block;
  font-size: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  margin: 50px auto 0;
  padding: 16px 30px;
  cursor: pointer;
}

You now have a beautiful landing page for your website with a nice high-resolution video background!

Check out the source code here.

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

Happy coding!

Enzo.

Blog

Add a video background in HTML/CSS

Ustariz Enzo

1. The basic structure of your code.

2. Add the video to your HTML!

3. Add an overlay with some text.

4. Let's style the page!

Join Our Newsletter. No Spam, Only the good stuff.

Related