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 Android platforms as auto play is disabled the video will remain "paused".

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

  • 1st DIV is a container which will hold the the display and set the width as required.
  • 2nd DIV  contains the video and is placed using an absolute position on top and left.
  • 3rd DIV  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" class="cn">   
<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>
</video> 
<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="https://www.hotelsafloat.com/home-away.php">Click here and be impressed</a>
</p> 
</div>
</div>
</div>

The CSS3 styles


#videoDiv {width: 100%; height: 360px; position: relative;}
#videoBlock,#videoMessage {width: 100%; height: 360px; 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 mobile and hand-held devices.
As far as I know background videos will not work on most mobiles as they require a manual click by the user to start the playback. The best solution is to replace the display of the video with So it's worthwhile using a media query for small screen sizes and hiding the video layer to display a static alternative image.


/* Default hide the video on all devices */
#video{display:none}

/* 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) {
#video{display:block;}
#videosubstitute{display:none}
}

Hire us!

We're available for

HTML projects

Click for more CSS

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="videoDiv"> 
<div id="videoBlock"> 
<img src="http://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt=""><
<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>
</video> 
<div id="videoMessage">
<h1>Hire us</h1>
<h2>..we're available for</h2>
<h3>HTML projects</h3>
<p class="videoClick" >
<a href="//github.com/phillipaldridge/nevermind">Click for more CSS</a>
</p> 
</div>
</div>
</div>

Modified CSS3 styles


/* Default hide the video on all devices */
#video{display:none}

/* 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) {
#video{display:block;}
#videosubstitute{display:none}
}
Do you like CSS? Check out our "Nevermind CSS" project, you may be inspired. On the next page we'll look at displaying a full screen background video
 

Other ways to contact us