How to add HTML5 video fullscreen?

In previous years all the video you have ever watched online has been channeled through a third party plugin such as QuickTime, Flash, or RealPlayer. With these plugins integrating into the various web browsers almost invisibly the viewer didn’t really need to know or care about how they were seeing the video. Problems arise however when the user suddenly tries to view a video on a platform that is not supported.

With an ever growing audience viewing video content on portable devices the problem of ensuring video can be seen on any device with any browser is of growing concern to web developers. Compounding the problem is a lack of support for many of the plugins on many of the portable browser versions such as iOS, Android, and Windows Phones – with a lack of support for Flash on all the major platforms being a major issue for many users and developers especially.

The HTML5 video specification has been trying to change all that but it is still an uphill battle. Modern browsers in conjunction with new specifications in HTML5 have made adding video to a web page a much simpler affair than it used to be. No longer do web developers need to rely on third party plug-ins, add-ons, or even embedded code copied from other sites. A video on your page should be just one simple video tag away… at least in theory.

The video tag is compatible with all modern browsers including IE 9+, Firefox 3.5+, Safari 3.0+ Opera 10.5+ iPhone1.0+ and Android 2.0+. However, support for the video element is only one piece of the puzzle, as adding video to a webpage which can be viewable everywhere is still regarded as somewhat of a challenge.

The blame for the complexity rests on browser support and codec licensing. Web developers are used to navigating around the shortcomings of browser compatibility but codecs from the various vendors create a greater level of complexity when building a successful HTML5 site which requires video as part of its content.

The Limitations HTML 5 Video and Full Screen Issues

Most modern browsers have full screen support for HTML 5 video but there is still the issue of the various flavors of codecs found out in the wild. Plus, with the ever growing number of portable devices including iOS, Android, and now Windows phones, the problem is just growing in complexity. In short, not all browsers are going to be able to play all of the codecs, so if you want to ensure your video can be played almost everywhere then you are going to have to encode it more than once.

Your best bet is to encode one version using the WebM format, another in H.264 baseline video and AAC audio, and a third using Theora video and Vorbis audio in an .MP4 container. To insert the video into the web page you use the video tag and then link to the various source files. Whichever web browser is being used will simply play the first file it comes across that it is compatible with.

A full screen background video has the issue of bandwidth which is of big concern to users on mobile Internet plans due to the expense of data. For this reason the video should be compressed as efficiently as possible in order to minimize data usage. It also needs to be able to scale across the varying screen sizes it will be viewed on. A placeholder image should also be included should the browser not be compatible.

Converting video is not the chore that it once was as many developers have stepped up to the plate to provide video converters which make the job a fairly simplified affair. The converter at http://easyhtml5video.com/ is one such program designed to make the task of converting any video format into compatible versions for the majority of platforms – including Android, iOS, and Windows. Simply drag and drop your video, select the desired poster image, select your codecs, tune the settings to suit your audience, press start and then watch the magic happen.

With your videos converted into the various formats and uploaded to your server all that is now required is the HTML and CSS code. Your HTML code for displaying the video will go something like this:

<video poster="placeholder.jpg" id="backgroundvid">
<source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<p>Fallback content to cover incompatibility issues</p>
</video>

To make the video full screen use the following CSS:

video#backgroundvid { 
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover; 
}