News

How to use HTML5 to create fullscreen video backgrounds

Find out how to create the framework needed to display fullscreen video that plays in a loop in the background of your site.

How-to-use-HTML5-to-create-fullscreen-video-backgrounds

How to use HTML5 to create fullscreen video backgrounds

inspiration: www.wilsonsideral.com.br | Tutorial files

There are a few important considerations to make before beginning; first, if your video is not intended to be the main focus of your site, then it is best to go for something abstract without sound, however, if all you want to display is the video with just a smattering of text, feel free to place whatever you like in there.

Second, if you are concerned with browser backwards compatibility then it may be worth taking a look at some methods to ensure that video will  fail gracefully for any version that’s earlier than Internet Explorer 8.

TECHNIQUE

Fullscreen HTML5 and CSS video

Get the video

We’re using some royalty-free stock video from www.vidsplay.com. Choose one you want and add it to your project with the code below. You’ll need to convert this video to WebM format – more information on doing so can be found at www.mirovideoconverter.com. The WebM version must be placed before the MP4 version.

001    <video>
002        <source src=”video/sun_reflection. webm” type=”video/webm”>
003    <source src=”video/sun_reflection.mp4” type=”video/mp4”>
004    </video>

Make it autoplay

We need to add a couple of elements to the start of the video tag, which will ensure that our video autoplays and loops. We will also add a poster tag, which acts as a static image placeholder while the video content is loading. The poster tag is optional, as the first frame of the video will be used if one is not supplied.

001    <video autoplay loop poster=”img/frame.jpg” id=”BG”>
002        <source src=”video/sun_reflection.webm” type=”video/webm”>
003    <source src=”video/sun_reflection.mp4” type=”video/mp4”>
004    </video>

Fill the screen

With the following CSS we can remove the page margin as well as stretch the video to fill the entire browser window. We’ve gone for a video that is 1080p to ensure that there won’t be as much degradation in picture quality when video is stretched to larger screen resolutions,

001    <style type=”text/css”>
002        video#BG {
003            position: fixed; right: 0; bottom: 0;
004            min-width: 100%; min-height: 100%;
005                width: auto; height: auto; z-index: -100;
006                background: url(img/frame.jpg) no-repeat;
007                background-size: cover; 008            }
009    </style>

Overlay content

Adding the following HTML underneath our video tag will allow us to overlay text on top of our video. In the next step we will add some style to it, so not only will it be more readable but it will also be aesthetically pleasing. If you add more layers, you may need to tinker with the Z-Index to get things in the right order.

001    <div class=”overlay”>
002            <h1>Lorum Ipsum</h1>
003            <p>Lorem Ipsum is simply dummy 
text […] Lorem Ipsum.</p>
004    </div>

Style the overlay

The following CSS block will make the overlay block look a lot better. Feel free to change the font to suit your preferences – it is recommended that you use the Google Font library to do so in the most optimal way. You can also modify the text colour and background colour.

001            .overlay {
002                    width: 30%;
003                    background: rgba(102, 102, 102, 0.6);
004                    padding: 20px;
005                    color: #fff;
006                    margin-top: 80px;
007            }
×