HTML5 Video scale modes?

video html fullscreen scale
Drew Baker picture Drew Baker · Dec 7, 2010 · Viewed 76.5k times · Source

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

Michael picture Michael · Dec 31, 2013

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.

Related questions

Is there a way to make HTML5 video fullscreen?

Is there a way to play a video fullscreen using the HTML5 <video> tag? And if this is not possible, does anybody know if there is a reason for this decision?

Read More
Embed youtube videos that play in fullscreen automatically

So what I'm trying to do is have fullscreen video across my website. But I would like to auto play a youtube video and automatically in fullscreen (The size of the browser window). My site navigation is left and right …

Read More
Can I avoid the native fullscreen video player with HTML5 on iPhone or android?

I've built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video. It works great in desktop browsers: Firefox, Chrome, and Safari. On an iPhone or a DroidX, the native …

Read More