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 gett he 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!

Answer 1

Another way to do this with CSS is to use the object-fit property. This works on video or img elements

video {
    object-fit: cover;
}

http://caniuse.com/object-fit

http://dev.opera.com/articles/css3-object-fit-object-position/

This is only compatible in Chrome 31+ but is the simplest CSS solution and is a Candidate Recommendation.

Answer 2

You can do this just with CSS:

video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);        
}

Obviously use the appropriate vendor prefixes for the transform property

Bonus: to do this with an image, you can use "background-size: cover;" to crop the image to the desired space:

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(background-image.jpg) center;
  background-size: cover;
}

Answer 3

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

});

Answer 4

I use ExtJS 5 to show video, the following code works!

```

var w = Ext.widget('window',{
    renderTo: Ext.getBody(),
    x : 10,
    y : 10,
    width: 480,
    height: 670,
    maximizable: true,
    html: '<video style="width: 100%;height: auto;max-height: 100%;" controls playsinline autoplay muted loop><source src="'+url+'" type="video/mp4"></video>'
})
w.show()

```

Answer 5

a quick and dirty with css only:

video
{
    width: 100%;
    height: auto;
    max-height: 100%;
}

as seen on: http://web.archive.org/web/20171013204829/www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos