HTML5 Video Background
While Video Backgrounds are a very desirable technique in web design today, there are several limitations to consider before implementing this. Keep in mind that:
- 1.) Fullscreen videos with clickable HTML elements overlaying will not work on iPad.
- 2.) iPhone and Android browser will break the video out into it’s own player, completely destroying this setup. This is not something you should plan to serve to mobile browsers.
- 3.) Autoplay is also disabled on iOS devices, again solidifying that this type of design is not suited for the current mobile browsing environment.
I have been on an epic quest to learn all about HTML5 video and its current capabilities, now I am sharing some of the valuable info I’ve obtained through experience. I will show you the best and most hassle free ways to create an HTML Fullscreen Video Background.
The Standard Method is me coding by hand, and in the jQuery Method I will show you how to implement a function which alleviates some of the hedge cases not covered by the Standard Method. It never hurts to build on the work of others!
Standard Method
My first try at HTML5 video background was done using the simple video tag we explored here. This along with some CSS classes will achieve most of the effect we’re going for. However there are some hedge cases that this simple method does not account for. It looks fine on first load, but if the user resizes the browser to less than the video’s aspect ratio, we will get a white space at the bottom of the screen. If your HTML content is shorter in height than your video, this method is fine.
HTML5 Video Embed
Notice we only specify the width, not the height of the video. If you specify the height as well, the video will shrink down to fit on the screen, creating whitespace. This is supposed to be a background so we want full window coverage at all times, even if it means not seeing all of the video.
CSS Classes
Here we use CSS to make the video’s container always be the size of the browser window, and make sure that it stays in its spot when scrolling through the HTML content, and a negative z-index value to keep it below our HTML content.
body{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#container{
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}
jQuery Method
This Method is to show you how much you can improve your own products by building on the work of others. I have gone through every example of this type I could find, and jQuery VideoBG plugin is the most hassle free script I’ve come across to date. All you need to do is upload the .js file to your server and link it in your page’s header, along with jQuery, and add the videoBG jQuery call to your Ready function. This eliminates the need for a video container div, and the HTML5 video tag; videoBG generates it for you. The main reason I like this script is that it gets rid of that pesky whitespace when users resize their browsers. Depending on how much HTML content you are overlaying over your video background, this method may or may not be an improvement for you.
There are several other “pre-packaged” solutions for Video Backgrounds such as CMS Themes and other javascript libraries, not many of which are free. In this demo, I wanted to show how bare-bones we could go with it. In the next post I will explain how adding higher levels of interactivity to video usually requires a third-party video player and learning to program Javascript using an API reference.
-Zack Smith
Interactive Developer at Graphite Lab
