Adeyele Paul

Posted on May 1

How to create a responsive video background in HTML and CSS

#webdev #html #css #ui

Nowadays, getting people's attention is really important for websites - and one awesome way to do that is by using background video behind some content on your site. But making those videos look perfect on any screen size can be tricky.

Luckily, with some little HTML and CSS tricks, you can make a video background that works great no matter how big or small the screen is.

In this article, I'll explain step-by-step on how to make this super cool video background effect. So stay with me!

Things you may need

To get started with our responsive video masterpiece, we'll need a few key things.

First up, a code editor - anything from bare-bones Notepad to fancy pants Adobe Dreamweaver works. As long as it lets you write HTML and CSS, you're golden.

Next, a modern web browser like Chrome, Firefox, Safari etc. to actually view our handiwork.

And finally, the star of the show - a video file to use as our full-screen background. MP4 format tends to be a safe bet since it plays nice with most browsers.

With those basic tools in our toolkit, we're ready to start writing some code! The process isn't too complex, so follow along.

Step 1: HTML structure

Okay, let's kick things off by coding the HTML bones for our responsive video background

We'll start by making a div to contain both the video itself and the visible page content. Give this div a class name like "fullscreen-video-container" so we can easily style it later in CSS:



<div class="fullscreen-video-container">
  <!-- Our video and text content will live here -->
</div>

Next, drop in the <video> element inside this container. This tag ultimately holds the video file, but first, we'll want to set up a few attributes:



<video autoplay loop muted>
  <!-- We'll plug in the video source next -->
</video>

autoplay - This tells the video to automatically begin playing once loaded, no click required.
loop - When the video finishes, this loops it right back to the start for continuous playback.
muted - Unless you're going for a loud insurgence, keeping things muted is wise.

For our actual video file, we'll use <source> inside the <video> tags:



<source src="https://www.dropbox.com/scl/fi/eg0c3th4vyjnnz09cwxam/22512-328261507_tiny.mp4?rlkey=sk0uvs93a3uby17qbzdx1c3cx&raw=1" type="video/mp4">

Here, src points to our video file's path and type clues the browser into expecting an MP4 video format.

Lastly, our container div needs a spot for the text overlaying the video background:



<div class="fullscreen-video-content">
  <h1>Some Text</h1>
</div>

With these elements mapped out in HTML, we've framed up the foundation to start making our video to be a responsive background!

Step 2: Basic CSS Styles

We've got the HTML ready. Now let's do some CSS magic!

First up, we'll work on that .fullscreen-video-container class. We want the video acting like a background, but in order to prevent unnecessary space we've to do some default setting in our CSS file:



* {
  margin: 0;
  padding: 0;
}

Now, let position the container relatively because we'll absolutely position the video inside:



.fullscreen-video-container {
  position: relative;
}

Next, in order to make the video container fill the whole screen, set width and height to 100vh and 100vw:



.fullscreen-video-container {
  height: 100vh; 
  width: 100vw;
}

The vh(viewport height) and vw(viewport weight) basically mean cover 100% of the viewable screen height and width.

Let's also add overflow: hidden to clip anything spilling outside:



.fullscreen-video-container {
  overflow: hidden;
}

Container done! Onto that <video> element positioning. First we'll absolutely position it relative to it's parent element:



.fullscreen-video-container video {
  position: absolute;
}

Now, set width and height to auto. This respects the video's aspect ratio when filling space:



.fullscreen-video-container video {
  width: auto;
  height: auto;
}

Finally, let's add min-width: 100% and min-height: 100% so that it stretches the video to fill it parent container while keeping the aspect ratio:



.fullscreen-video-container video {
  min-width: 100%;
  min-height: 100%;
}

If you've been following along your background video should look somewhat like this:

Yeah, I know it's not perfectly centered yet, but we'll fix that in step 3!.

Step 3: Centering the video

First, use top and left at 50% to shift the positioning point dead center:



.fullscreen-video-container video {
  top: 50%;
  left: 50%;
}

Now, you will notice that your background video became smaller and shifted to the bottom right:

To fix that use the transform's translate property:



.fullscreen-video-container video {
  transform: translate(-50%,-50%);
}

Lastly, set a z-index to control stacking order compared to other elements:



.fullscreen-video-container video {
  z-index: -1;  
}

This low z-index of -1 will push our video behind everything allowing our main content to come out like the "some text".

Here's the result:

You can see that our background video is perfectly centered, fills the full screen and responsive.But we're not quite done yet. We still need to handle styling that "Some text" heading text.

Right now it's just a plain h1 element lazily plopped on top of the video. To really make that content pop and complement our gorgeous video backdrop, we'll want to style up the text now.

Step 4: Styling the Content Overlay

We'll start by centering the content horizontally and vertically over the video using flexbox.

Now add this to your fullscreen-video-container:



.fullscreen-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Remember in our html file we gave the h1 a parent container of fullscreen-video-content

Now let style it with a clean background behind text:



.fullscreen-video-content {
  background-color: rgba(255,255,255,0.8);
  padding: 30px;
  border-radius: 5px;
}

The rgba value gives a semi-transparent white, so video shows through a bit. Padding and border-radius add nice spacing and rounded corners.

To style the text itself, target the h1 (or whatever element you used):



.fullscreen-video-content h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #333;
}

We increased the font size, added bold weight, and gave it dark gray text color.

And that's it! Content should now center vertically and horizontally over our full-screen video with slick semi-transparent background.

Conclusion

And there you have it - everything you need to know about implementing a seamless, responsive video background with some HTML and CSS!

We started by building out the proper HTML structure - a container div housing our video element and a content overlay. Then it was on to styling that video to behave like a full-screen, ratio-respecting background through clever positioning and some transform trickery.

From there, we brought focus to the overlay content by centering it vertically and horizontally with flexbox. A slightly transparent background helped the text pop against the moving video backdrop.

This technique is completely responsive out-of-the-box. Resize the container, flip to mobile, go full widescreen - that video background will effortlessly adapts while keeping its crisp quality.

If you get stuck or have any other questions along the way, just drop a comment below. I'm always happy to help!