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 DEMOThe 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

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.

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.