HTML5 Video: Fullscreen Background


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

By |2012-06-19T15:37:10+00:00June 19th, 2012|Uncategorized, Web Design|4 Comments

4 Comments

  1. thomas garret October 5, 2012 at 3:00 pm - Reply

    Hi there very usefull info here
    is there s a simple code that could be added so when viewed on an ipad or iphone it uses a picture instead of the video or an animated gif ?

    also I dont want to use flash I know a bit about coding but for ease of use i used iWeb for my old website but now would like to have a website with full video background and very simple animations on top of that but rahter not use flash
    do you have any program you would recommed that I could use ?

    regards

    Thomas

  2. Zack October 8, 2012 at 8:32 am - Reply

    There are two ways to give iOS alternate content. One would be to use PHP to detect iOS. A simpler way would be to use Javascript to direct iOS to a separate page upon load. This iOS only page would just have the video tag omitted and CSS that points to the still picture or gif.

    As far as doing web animation without flash, I would suggest learning jQuery, and/or trying out Construct 2, a visual editor that publishes to HTML5.

  3. ankur November 29, 2012 at 7:48 am - Reply

    Hey, Is their anyway to control the video playing in the background with up and down arrow keys.

  4. chougrani June 5, 2014 at 12:41 pm - Reply

    how to enable the sound?

Leave A Comment Cancel reply