Create a Fullscreen Video Background with only CSS

Eduardo | 2016-07-08

Create a Fullscreen Video Background with only CSS
How to insert an HTML5 Video on a website and use it as an animated fullscreen background only with CSS and HTML, no JavaScript required.

Many of you have seen these amazing websites with a beautifull background video and text on top. Many years ago this was only possible in dreams or with the use of flash making a very heavy to load website.

 

Today HTML, CSS and media queries have made it not only a reality but also very simple to do:

 

1) First of all you need to get a video, in one of our previous posts we published an article about  10 of the best Free video sites out there, So go ahead, pick one and go top the next step.

 

2) Add the video to youyr site using the HTML5 video tag and add the source to the video, you will need to wrap a video a division that will be used to position the video on the background. We will name this division videoBgWrapper:

 

<div class="videoBgWrapper">
    <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
        <source src="videosfolder/video.webm" type="video/webm">
        <source src="videosfolder/video.mp4" type="video/mp4">
        <source src="videosfolder/video.ogv" type="video/ogg">
    </video>
</div>

 

3) Add the follwoing CSS, this will make the video go to the background and take 100% the width and height of the window.

 

.videoBgWrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.videoBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

4) Finally with the use of media queries we will keep the aspect ratio of the video and adjust it to always cover the window as a fullscreen background.

 

@media (min-aspect-ratio: 16/9) {
  .videoBg{
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .videoBg {
    width: auto;
    height: 100%;
  }
}

 

If it all goes well you should have a fullscreen video playing on the background of your site. The best part is that it is compatible with most browsers, except explorer 8, but who cares.

 

Enjoy

 

Comments