scale HTML5 Video and break aspect ratio to fill whole site

Solution 1:

this a really old thread, I know, and what I'm proposing is not necessarily the solution you are looking for, but for all people that land here because of searching what I searched: scale the video to fill the video container element, keeping ratio intact

If you want the video to fill the size of the <video> element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-size for background images you can use the following:

video {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

I hope this can be of help for some people.

EDIT: works in most browsers but IE

Solution 2:

you can use:

min-width: 100%;
min-height: 100%;

http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

Solution 3:

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

[...] in the same way as the img element — if you only set one of width and height, the other dimension is automatically adjusted appropriately so that the video retains its aspect ratio. However — unlike the img element — if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box. Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.

Solution 4:

Picked this up yesterday and have been wrestling for an answer. This is somewhat similar to Jim Jeffers suggestion, but it works for x and y scaling, is in javascript syntax and only relies on jQuery. It seems to work pretty well:

function scaleToFill(videoTag) {
    var $video = $(videoTag),
        videoRatio = videoTag.videoWidth / videoTag.videoHeight,
        tagRatio = $video.width() / $video.height();
    if (videoRatio < tagRatio) {
        $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio  + ')')
    } else if (tagRatio < videoRatio) {
        $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio  + ')')
    }
}

You'll run into some issues if you are using the native controls as you can see in this fiddle: http://jsfiddle.net/MxxAv/

I have some unusual requirements because of all the abstraction layers in my current project. Because of that I'm using a wrapper div in the example and scaling the video to 100% inside the wrapper to prevent problems in some of the corner cases I have encountered.

Solution 5:

What worked for me is

video {
object-fit: fill;
}