With ever increasing broadband speeds you can afford to create sites that are more media rich for appropriate projects. In this article we’ll be looking at creating a full screen video player using HTML5; you can see some excellent examples of where this has been implemented by various developers at awwwards.com.
We’re going to look at two implementations, firstly an embedded HTML5 video that is responsive to the width of the screen that maintains the original ratio of the video, and then another that will ‘zoom’ to fill the whole screen without any scrolling. Note that it isn’t possible to ‘stretch’ videos, the aspect ratio must be respected; this snippet was taken from www.whatwg.org regarding the video tag:
"...video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed."
Before we get started with the coding, you need to make sure you have your video in the correct formats. To be compatible with all modern browsers (note this example has been tested in recent versions of Chrome, Firefox, Internet Explorer and Safari at time of writing), I would recommend creating two copies of your video:
Videos will often start out in the former format, if you don’t have software to export in WebM then there are many online convertors available. There are other formats available that you can use, which you can read more about on ZenCoder’s blog if you wish to.
Now we can get onto some coding! The new HTML5 video tag makes it nice and easy to embed videos in your web page:
Note that we have a line for each of our video types, and some text if video is not supported by the browser.
Next we want to make our video a bit bigger. Add the following css to your page (in one of the demos I’ve used embedded CSS to keep things simple).
Previewing the page will show how the video scales to fit the available width while maintaining the video ratio.
In addition, you could also add a 'max-height:100%' to ensure that you don't get any vertical scroll bars. With this method the maximum width or height will always be used without any scrolling.
But what if we want to fill the full screen for width and height? As previously mentioned it isn’t possible to stretch the video, but we can fill all the available space in a ‘zoomed’ version. The obvious downside of this is that depending on the screen size you will lose some of the video, so you’ll have to make a call on which method is more appropriate for your design.
To achieve a video that fills the screen for both width and height, firstly add a div tag container around your video (for this example give it a class called 'videoContainer'):
Then add the following css:
You should now have a video that fills all the available space on the screen. As an explanation to how this works; we're telling the video to use the maximum available width or height, but as it will maintain its aspect ratio this will mean it will overflow over the full screen size (unless you happen to be browsing in the perfect screen size). To overcome the issue of scrolling bars we wrap the video in a containing div that has the overflow hidden.
Here's a couple of demos for each of the above implementations:
Full screen video
Ideal if positioning is not important, e.g. the video is for design asthetic.
Responsive full width video
Ideal when the full video needs to be viewable, e.g. when it contains text.
Note there’s a transparent overlay to show the beginnings of how a full screen video could be worked into a design.
Check out our article on loading multiple HTML video players with jQuery dialogs.
Video file formats for HTML5 Video tag: http://blog.zencoder.com/2010/10/06/how-many-formats-do-i-need-for-html5-video/
Online Video Convertor: http://video.online-convert.com/convert-to-webm
Big Buck Bunny Demo Trailer: http://www.bigbuckbunny.org/index.php/trailer-page/