DEV Community

Cover image for Add a video background in HTML/CSS
Ustariz Enzo
Ustariz Enzo

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Now let's deal with the video:

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

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);
}
Enter fullscreen mode Exit fullscreen mode

As you can see, you can either use:

width: 100%;
height: 100%;
Enter fullscreen mode Exit fullscreen mode

or

 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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/Learntocreate/videos

Happy coding!

Enzo.

Discussion (0)