HTML5 Video Scale to Fill Container with jQuery

Posted by on December 5, 2011 in Web Design Blog | 10 comments

I’m working on a new large-background WordPress theme that I am going to release for free within the next two weeks. As part of the theme, I wanted to use a high-definition HTML5 video as the background of the landing page of the theme.

Here’s where I ran into trouble: browsers like to keep the aspect ratio of the video element within the <video> tag the same, no matter what the scale of the containing box is. I didn’t want to change the aspect ratio, I just wanted the video to fill the background and crop any overlap outside of the browser window.

There are a couple libraries that one can use to solve this problem, but I couldn’t get any of them to work for me. Here’s how I did it.

Using an HTML5 Video as a Background For a Website

I found this StackOverflow post (http://stackoverflow NULL.com/questions/4380105/html5-video-scale-modes) that was extremely helpful in figuring out how to scale video to the size of the screen. I had to edit his code a bit to get it to work for me.

 

Make sure to include jQuery in the <head> of your document:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

 

Here is the HTML I used to get this to work:

        <video width=”1280″ height=”720″ autoplay loop id=”fullscreen_video”>
<source src=”wp-content/themes/StekPortfolio/sample_media/wildlife.mp4″ type=”video/mp4″ />
<source src=”wp-content/themes/StekPortfolio/sample_media/wildlife.ogg” type=”video/ogg” />
Your browser does not support the video tag. <!– Author’s note: this should be replaced with an image, or use the css background tag to fill the background if the browser doesn’t support HTML5 <video>–>
</video>

<script src=”wp-content/themes/StekPortfolio/script.js”></script>

Contents of script.js:

   var sxsw = {

full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {

// Calculate new height and width…
var initW = imgWidth;
var initH = imgHeight;
var ratio = initH / initW;

imgWidth = boxWidth;
imgHeight = boxWidth * ratio;

// If the video is not the right height, then make it so…

if(imgHeight < boxHeight){
imgHeight = boxHeight;
imgWidth = imgHeight / ratio;
}

//  Return new size for video
return {
width: imgWidth,
height: imgHeight
};

},

init: function() {
var browserHeight = Math.round(jQuery(window).height());
var browserWidth = Math.round(jQuery(window).width());
var videoHeight = $(‘#fullscreen_video’).height();
var videoWidth = $(‘#fullscreen_video’).width();

var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

$(‘#fullscreen_video’)
.width(new_size.width)
.height(new_size.height);
}

};

jQuery(document).ready(function($) {

/*
* Full bleed background
*/

sxsw.init();

$(window).resize(function() {

var browserHeight = Math.round($(window).height());
var browserWidth = Math.round($(window).width());
var videoHeight = $(‘#fullscreen_video’).height();
var videoWidth = $(‘#fullscreen_video’).width();

var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

$(‘#fullscreen_video’)
.width(new_size.width)
.height(new_size.height);
});
})

The calculation for the full_bleed function was not changed from Drew Baker @ StackOverflow’s original code. All credit goes to him for that solution.

The main problem I ran into using this solution was that jQuery was not reading the size of the original video correctly – it was telling me the size of the video was 150 by 300 pixels when I was sure that the video was 720p. Because it was reading the size values incorrectly, it was calculating the proportion to scale to incorrectly and letterboxing the video. Ensure that your id tag in the HTML matches up with the tag identifier in the jQuery script. Also make sure you specify the size of the video when declaring the <video> tag in the HTML.

 

Here is the CSS I used to tie everything together and make the video display as a background.

#fullscreen_video
{
background: #FF0000;
position: fixed;
top: 0px;
left: 0px;
z-index: -1000;
}

This code could be easily modified to scale a video to fill a div tag or any container for that matter. You’d have to edit the jQuery so that it measures the size of the video’s container rather than the viewport of the browser. This is the code you’d need to modify:

var browserHeight = Math.round(jQuery(window).height());
var browserWidth = Math.round(jQuery(window).width());

It took me about four hours to get everything working the way I wanted it to. Hopefully this guide will help to expedite this process for some.

Don’t hesitate to Contact Me (http://www NULL.epicwebsites NULL.com/contact-me) if you have any questions about how I got this to work or suggestions on how to improve this code.

 

 

ADDENDUM:

The above code can be used for scaling other elements too. If you want to have a dynamic large image background that scales to fit the screen -well- the code above can be reworked to make any tag work. I changed my code so that it would fill everything of the “fill” class. You can email me if you’re interested in the code.


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/epicwebs/public_html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273