Background video for HTML

How to place a video into the background using CSS (using HTML5 to be honest).

The Early Bird...

...has the best holiday.

Boat rentals in France

Click here and be impressed

What ever your reasons in wanting to do this, the HTML and CSS is  fairly simply and can be fairly responsive when  needed.  However on most mobile and hand-held platforms the auto-play is disabled, so the video will remain "paused" at the beginning when the document is loaded. The only work around I've found is to use Java and force the video to play after a user interaction.

You'll need 3 DIVs as shown in the diagram below.

  • 1st DIV "videoDiv" is a container which will hold the the display and set the height as required.
  • 2nd DIV  "videoBlock" contains the video and is placed using an absolute position on top and left.
  • 3rd DIV  "videoMessage" will display  all the foreground content such as text and images. This is also placed with an absolute position in the 1st Div, we change the z-index of this 3rd DIV so it is placed "on top" of the 2nd DIV.

You can style the text as you want, place images, dynamic data or whatever you need in the 3rd DIV.

The video element does not display any controls and is set with a preload and autoplay.

You'll want to use video formats that are compatible with as many browsers as needed, in the above demo I've used MP4 and WEBM.

The HTML5 tags

<div id="videoDiv"> 
<div id="videoBlock">   
<video preload="preload"  id="video" autoplay="autoplay" loop="loop">
<source src="video/t12.webm" type="video/webm"></source>
<source src="video/t12.mp4" type="video/mp4"></source>
<div id="videoMessage">
<h1 class="spacer">The Early Bird...</h1>
<h2 class="spacer">...has the best holiday.</h2>
<h3 class="spacer">Boat rentals in France</h3>
<p class="videoClick" >
<a href="">Click here and be impressed</a>

The CSS3 styles

#videoDiv {width: 100%; height: 360px; position: relative;}
#videoBlock {width: 100%; height: 100%;  display: flex;  justify-content: center; align-items: center;}
#videoMessage {width: 100%; height:100%; position: absolute; top: 0; left: 0;}
#videoMessage *{padding:0.4em; margin:0}
#videoMessage {text-shadow: 2px 2px 2px #000000; color:white;z-index:99 }
#videoMessage h1{font-size: 2em;color:#ffffff;text-align:center;}
#videoMessage h2{font-size: 1.5em;color:#ffffff;text-align:center;}
#videoMessage h3{font-size: 1.2em;color:#ffffff;text-align:center;}
.videoClick {text-align:center}
.videoClick a{color:white;background-color:rgba(241, 241, 241, 0.25);font-size: 1.7em;cursor:pointer;cursor:hand}

Responsive background video

Making this responsive for different screen sizes, mobiles and hand-held devices.

As far as I know background videos with autoplay will not automatically start on mobile devices. The user is required a manual start the playback. This means you'll have to display the HTML5 video control buttons to give the user the choice in starting playback. The work-around is to replace the the video with a fixed image.

We can do this using a media query for small screen sizes and hiding the video layer to display a static alternative image.

For the larger screens we'll use the following code to make the video responsive.

/* Default hide the video on all devices */

/* Default display the image to replace the video on all devices */
#videosubstitute{display:block; width:100%;height:auto}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

Hire us!

We're available for

HTML projects

Click for rates

If you change your window size to less than 992px wide, the video will not display but the replacement image will and vis-versa of course.

Modified HTML

<div id="videoDiv2"> 
<div id="videoBlock2">  
<img src="" id="videosubstitute" alt="">
<video preload="preload" id="video2" autoplay="autoplay" loop="loop">
<source src="video/t12.webm" type="video/webm">
<source src="video/t12.mp4" type="video/mp4">
<div id="videoMessageBox2">
    <div id="videoMessage2">
        <h1 class="spacer">Hire us!</h1>
        <h2 class="spacer">We're available for</h2>
        <h3 class="spacer">HTML projects</h3>
        <p class="videoClick2">
            <a href="2017-website-tarifs.php">Click for rates</a>

The modified CSS3 styles

/* Default hide the video on all devices */
/* Default display the image to replace the video on all devices */
/* Medium Devices, Desktops */

@media only screen and (min-width : 992px) {
#videoDiv2 {width: 100%; max-width:992px; margin:auto; display:block;position: relative;}
#video2{width: 100%; }
#videoMessage2 {padding:0.4em;}
#videoMessage2 {text-shadow: 2px 2px 2px #000000;color:white;z-index:99 }
#videoMessage2 h1{font-size: 2em;color:#ffffff;text-align:center;margin: 0.25em;}
#videoMessage2 h2{font-size: 1.5em;color:#ffffff;text-align:center;margin: 0.25em;}
#videoMessage2 h3{font-size: 1.3em;color:#ffffff;text-align:center;margin: 0.25em;}
.videoClick2 {text-align:center}
.videoClick2 a{color:white;background-color:rgba(241, 241, 241, 0.25);font-size: 1.7em;cursor:pointer;cursor:hand}

#videoMessageBox2 {
    position: absolute;  top: 0;  left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;

#videoMessage2 {
     -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;

On the next page we'll look at displaying a full screen background video with text on top.