Scale and Center HTML5 Video with jQuery

Posted by on March 10, 2012 in Web Design Blog | 2 comments

A few months ago, I posted code to show how to scale a video to fill the browser window – how to do a Full Bleed fill for video or html elements. One of my readers contacted me with a question – how do I center this video on the screen? Turns out, I had the same problem.

How to do a Full-Bleed fill with Video or Images using jQuery

The code I’m going to link to is the updated code – just give any element the class “.fill” and it will automagically scale that item to fit its container. IMPORTANT NOTE, however. You must specify the starting height and width of the element in the HTML. Here’s an example with an image:

 

<img src="path/to/image.png" alt="" width="800" height="600" class="fill" />

 

Here’s that same one with video:

<video width="1280" height="720" autoplay loop class="fill" muted="muted">
<source src="path/to/mp4video.mp4" type="video/mp4" />
<source src="path/to/webmvideo.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

In firefox, the video will start playing with sound even with the muted tag set. It’s a bug caused by firefox not supporting that particular HTML5 property. Here’s how to turn off sound. Add this code after the above.

<script language="javascript" type="text/javascript">
$("video").prop('muted', true);
</script>

Here’s where the magic happens, with a quick modification of the code on the other post.


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
};

},

};

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

/*
* Full bleed background
*/

function recalculateFills() {

//get pixel size of browser window.
var browserHeight = Math.round($(window).height());
var browserWidth = Math.round($(window).width());

//jquery all items on page with fill tag
var fills = $(‘.fill’);

//for each fill, recalculate size and position and apply using jQuery
fills.each(function () {

//height of element. not neccessarily video
var videoHeight = $(this).height();
var videoWidth = $(this).width();

//calculate new size
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

//distance from top and left is half of the difference between the browser width and the size of the element
$(this)
.width(new_size.width)
.height(new_size.height)
.css(“margin-left”, ((browserWidth – new_size.width)/2))
.css(“margin-top”, ((browserHeight – new_size.height)/2));

});
}

recalculateFills();

//we also have to recalculate if the window rectangle changes.
$(window).resize(function() {
recalculateFills();

});

})

Example of scaling code in use on an image (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2012/03/fill_sample NULL.html)

Download the code example (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2012/03/fill_example_code NULL.zip)


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