I'm trying to make a fullscreen HTML background, which is easy enough. But because HTML5 video get resized to fit the container while maintaining aspect ratio, I can't get the desired effect.
Are there different scale modes for HTML5 video? I'd like to scale to fill-and-crop.
This is the desired effect done in Flash: http://www.caviarcontent.com/
If you resize the window you'll see it scale and crop. You will never get black bars.
Thanks for the help!
I figured it out by using the same function I wrote about here.
If you have a element on the page, this jQuery resizing function will scale the video to be full bleed of the browser window.
By changing the browserHeight and browserWidth variables you could have the video scaled to fit a DIV (make sure you set that DIV to overflow:hidden).
This function will also resize dynamically with the browser window.
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 = jQuery('video').height();
var videoWidth = jQuery('video').width();
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
jQuery('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 = $('.wd-thumb-list li a').eq(0).attr('data-wd-height');
var videoWidth = $('.wd-thumb-list li a').eq(0).attr('data-wd-width');
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);
$('video')
.width(new_size.width)
.height(new_size.height);
});
});