To use a video background we have to use the HTML 5 <video> element with position absolute inside a container wrapper.

Videos are increasingly common in nowadays websites and a great way to create a modern website. With just a bit of CSS you can add a video background to your site in a matter of minutes. However, note that this technique works only for <video> elements. This means the video will have to be hosted somewhere. You can also use CSS to create a Youtube video background , but that's not what this tutorial is about.

Finding a background video

If you don't have a video yet, the easiest way to find videos for your site is by using video stock galleries like Pixabay or Pexel .

Once you find the one you want to use, you'll have to download it and upload it to your server (or CDN services like Cloudinary ).

Once uploaded we have the URL of the video and we can use it in our <video> element.

Adding the HTML for the video

For the video we'll be using the HTML 5 video element . It expects at least a video source file and can be configured passing multiple HTML attributes.

For our example we'll be using this:

<video playsinline autoplay muted loop poster="cake.jpg">
    <source src="my-video-url.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

We'll talk later more about the background video configuration and the video formats .

Placing the video in the background with CSS

Usually, in CSS we set the background image by using the background property or the background-image one.

background: url(imgs/my-background-image.png);
background-size: cover;

However, the background property only works for images and colors. Not with videos.

Now we have a standard video element, so, how do we convert it into a background? We'll be using a little trick here. Using the CSS position: absolute we will simulate a background element.

video {
  position: absolute;
  top: 0;
  left: 0;
}

This will place our video outside the normal flow of the document and relative to the element we choose within its parents.

So, time to add our video container! We'll be using a div element as the container for our video. We called it video-wrapper .

<div class="video-wrapper">
  <video playsinline autoplay muted loop poster="cake.jpg">
    <source src="my-css-video-background.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>

And here's where the magic happens:

.video-wrapper {
  /* Telling our absolute positioned video to 
  be relative to this element */
  position: relative;

  width: 400px;
  height: 200px;

  /* Will not allow the video to overflow the 
  container */
  overflow: hidden;

  /* Centering the container's content vertically 
  and horizontally */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

I added comments on the CSS code so you can see what each of the properties is for.

Making the background video cover the whole container

It's common for backgrounds to cover the whole container. We usually do this with CSS by using the style background-size: cover directly on the background image. But because in this case, our video is not actually a CSS background, we'll be using another little trick by using object-fit: cover together with height: 100% and width: 100% on our video element.

video {
  /** Simulationg background-size: cover */
  object-fit: cover;
  height: 100%;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;
}

To illustrate this better, here's an example of a video background not covering the whole container:

See the Pen on CodePen .

And here's the same video background covering the whole container:

See the Pen on CodePen .

Adding elements on top of the video background

Right now there's nothing special we have to do in order to add content on top of our video. And that's because we added the property position: relative to the video container when setting the video as a background (which is absolute positioned).

Anything that you add after the video element will be positioned on top of it.

<div class="video-wrapper">
  <video playsinline autoplay muted loop poster="cake.jpg">
    <source src="my-css-video-background.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>

  <!-- This will be positioned on top of our video background -->
  <div class="header">
    <h1>Blueberry Cheesecake</h1>
    <button>Recipe here</button>
  </div>
</div>

Here's the final result:

See the Pen on CodePen .

Configuring the video

If you noticed, in our HTML code we've added quite a few things on the video element. The most important ones are loop , muted and autoplay .

<video playsinline autoplay muted loop poster="cake.jpg">
    <source src="my-css-video-background.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Videos won't be able to autoplay unless we mute them first. And if you are using a video background using the loop option is quite common too, so the video will play endlessly.

The poster is the image we want to show while the video still loading and can't yet autoplay.

Video formats and browser compatibility

The HTML 5 video element allows the use of multiple source files. This means we can provide our video in different formats for browser compatibility.

<video playsinline autoplay muted loop poster="my-static-image.jpg">
    <source src="my-video-url.webm" type="video/webm">
    <source src="my-video-url.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

In this example, we first try to load the webm video, and if the browser can't play it, it will fall back to the mp4 version of it.

Not all browsers can play all kinds of video formats, see the compatibility table for each video format .

The mp4 format is widely accepted by most modern browsers, but using alternatives like webm can come in handy to save bandwidth too. So, adding both can be a good combination.

If you wonder how to convert from one format to another, you can use any of the online converters. Just Google "mp4 to webm" or "webm to mp4" and you'll find plenty of converters online.

Conclusion

There's no excuse to use videos nowadays. Videos in websites are a very powerful design tool that can provide your website a modern look. They are easy to implement, ligther that GIF animations and high quality.

As you could see, you only need a few lines of CSS to set any video as a background. And, if you want to go one step further, you can go full-screen by using components like fullPage.js . Check out the video example here .

How to create a Youtube background video with CSS

How to create full-screen background videos with HTML and CSS

10 CSS cool animations to add to your site

CSS scroll snap horizontally

Best Ways To Make Font Bold in CSS