HTML5 Video scale modes?

Question

I\'m trying to make a fullscreen HTML background, which is easy enough. But because HTML5 video get\'s resized to fit the container while maintaining aspect ratio, I can\'t

Answer 1

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

});