responsive-css-video-background
CSS HTML Web Development

A Guide to Responsive CSS Video Background

In this tutorial, I’m going to show how to add a responsive CSS video background to support all screen size and also showing static image instead of video for mobile devices too. You can find full source code at the end of this post.

Here is the example page that we’re going to work on. I have a centered div with some text on it. This video is going to show you how to add the video background underneath it.

responsive-css-video-background-1

Here is the footage that I have in MP4 format with full HD quality (1920×1080) The first thing I’m going to do is to open it in full-screen mode and capture the first frame of the footage. This image will be used in poster attribute in the video tag which will be displayed when the video is loading.

responsive-css-video-background-5

The Code

Next, let’s add the video tag into our HTML page , set the poster image and add the attributes.
I want the video to start playing immediately, repeating infinite time and without any sound.

<video id="videoBG" poster="poster.JPG" autoplay muted loop>
    <source src="footage1.mp4" type="video/mp4">
</video>

For the CSS, I’m going to add position fixed and set the z-index to minus one. This will keep the video element at the back while fixing the position.

#videoBG {
    position:fixed;
    z-index: -1;
}

responsive-css-video-background-2

It seems to be working. But if you try resizing the browser, you will see that the video is not scaling at all!

If we simply set either side to 100% that’s not going to work because we need to scale the video properly according to the current browser size.

#videoBG {
    position:fixed;
    z-index: -1;

/*not work if the screen ratio is below 16/9*/
    width:100%;     
    height: auto;
}

responsive-css-video-background-3

We’ll need to use media query.

The Responsive Way

The first media query I’m going to add is when the screen is too wide. We need to keep the width to 100% and scale the height. We can achieve this by using min-aspect-ratio 16/9.

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

And we’ll do it vice versa when the screen ratio is below 16/9.

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

The final step is to replace the footage with a static image on mobile. We usually do not want to play the video on mobile due to high data cost. We’ll add another media query for any devices that have 767px width and below. Simply add display:none to the video tag and the poster image as background to the body.

@media (max-width: 767px) {
    #videoBG {
        display: none;
    }
    body {
        background: url('poster.jpg');
        background-size: cover;
    }
}

responsive-css-video-background-4

And that’s it. Hope this help. You can see it in action in video below.

If you love this tutorial, stay connected with us by like our Facebook and Youtube Channel. Before leaving you might want to check out our animated CSS snow effect background too!

Pure CSS Snow Effect with Falling Animation

Source Code

HTML

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div id="textdiv">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam.</p>
        </div>
        <video id="videoBG" poster="poster.JPG" autoplay muted loop>
            <source src="footage1.mp4" type="video/mp4">
        </video>
    </body>
</html>

CSS

html,body {
    width:100vw;
    height: 100vh;
    margin: 0;
}
#videoBG {
    position:fixed;
    z-index: -1;
}
@media (min-aspect-ratio: 16/9) {
    #videoBG {
        width:100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9) {
    #videoBG { 
        width:auto;
        height: 100%;
    }
}
@media (max-width: 767px) {
    #videoBG {
        display: none;
    }
    body {
        background: url('poster.jpg');
        background-size: cover;
    }
}

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *