Scale HTML5 Video to Fit Screen

With the recent updates of browsers supporting web more W3C standards, it is easier to embed HTML5 videos than before, although you still have to provide your video in multiple codecs such as webm, ogg, and mp4.
The thing is you still have to use javascript to control the video’s functionality. So here’s the simplest way to make your HTML5 video fit the screen of your browser. For this demo I will be using the popular and free video.js open source player.  There are several ways to do this, but after testing across different browsers I found this way the most efficient. (Demo inside)

Click for DEMO
The page will turn black and the video will load. If you don’t see a video, but only the black screen, it’s because I didn’t include all possible video formats yet.

1. Include the Video.js library (javascript and css) and its dependency jQuery

[code lang=”html”]<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="http://vjs.zencdn.net/4.1/video.js"></script>
[/code]

Since the video will take up the entire window, I think it’s better to add it dynamically and remove it from the DOM after it’s done playing.

2. Create the <video> tag and its attributes [note: to add the player controls, just add the class “vjs-default-skin” to the <video> tag]:

[code lang=”js”]
<script type="text/javascript">// <![CDATA[
$(function(){
var splash = ‘<video id="videoPlayer" class="video-js" autoplay controls preload tabindex="0" data-setup="{}">’;
splash += ‘<source src="intro.webm" type="video/webm">’;
splash += ‘</video>’;
// ]]></script>
});
[/code]

3. Prepend the <video> element to the body so it loads first, then set its CSS.

[code lang=”js”]
$(‘body’).prepend(splash);
$(‘#videoPlayer’).css({
position: ‘fixed’,
top: 0,
left: 0,
‘z-index’: 1,
‘object-fit’: ‘fill’,
‘background-color’: ‘#000’
});
[/code]

You can set the CSS styles in stylesheet instead if you prefer.  [Note: the ‘object-fit’ property is for future proofing so it’s not required as of now.]  Make sure the ‘z-index’ is also higher so the video overlays your other content.  In the next step we will set the width and height using the Video.js library but you can set it above if you prefer.  I just found that Video.js sets default values if you don’t specify them.

4. Render the video player, set its dimensions and fade it out nicely after playback.
[code lang=”js”]
var vid = _V_("videoPlayer", {}, function(){
this.width( $(window).width() );
this.height( $(window).height() );

this.addEvent("ended", function(){
$(‘#videoPlayer’).fadeOut();
});
});
[/code]

We’re using jQuery’s ‘width()’ and ‘height()’ methods because they include cross-browser compatibility. Browsers still have different properties to measure the window dimensions.  The ‘addEvent’ method is from Video.js and allows additional functionality.  Inside this function we are removing the player from the DOM after it’s done playing.

That’s all there is to do.  Since we placed the javascript code inside an jQuery’s anonymous function it will execute as soon as it loads.  This should be quicker than the ‘ready()’ method since you don’t want to wait for the entire DOM to load.

Here’s the code in its entirety:

[code lang=”js”]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" /><script type="text/javascript">// <![CDATA[
$(function(){
var splash = ‘<video id="videoPlayer" class="video-js vjs-default-skin" autoplay controls preload tabindex="0" data-setup="{}">’;
splash += ‘<source src="intro.webm" type="video/webm">’;
splash += ‘</video>’;

$(‘body’).prepend(splash);
$(‘#videoPlayer’).css({
position: ‘fixed’,
top: 0,
left: 0,
‘z-index’: 11,
‘object-fit’: ‘fill’,
‘background-color’: ‘#000’
});
var vid = _V_("videoPlayer", {}, function(){
this.width( $(window).width() );
this.height( $(window).height() );

this.addEvent("ended", function(){
$(‘#videoPlayer’).fadeOut();
});
});
});
// ]]></script>
[/code]

For further options and W3C draft specifications read here https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html