How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio?

Question

I\'ve been experimenting with HTML5 video playback. For example I have this video object embedded on my page:

Answer 1

A little late now, but the object-fit CSS3 property will satisfy this need. http://dev.w3.org/csswg/css3-images/#object-fit It is already implemented in Opera, see http://my.opera.com/desktopteam/blog/2010/08/03/presto-update .

Answer 2

Yes, I do think theres is at least one way to do it, but it's quite ugly: Scale the video element using CSS Transforms (or maybe SVG). The problem is that I think you would have to some Javascript to calculate the appropriate scale ratio based on the size of the container.

The good news would be that WebKit and Gecko has supported CSS Transforms for quite some time and also Opera 10.50 supports it. And they all support SVG.

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

Answer 3

You can also do this: Place the video element in the center with left and top of 50%, then translate it back with transform: translate(-50%, -50%);, finally give it a min-height and min-width of 100%

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

Answer 4

If you want the video to fill the entire frame AND maintain its aspect ratio, use the following:

video
{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Answer 5

There is currently no way of doing this, but with the CCS3 image-fit property it will become possible. No browser supports it yet, though. Then you could use this to make all videos stretch to width/height:

video {
  image-fit: fill;
}

See spec at http://dev.w3.org/csswg/css3-page/#propdef-image-fit

Answer 6

I tried image-fit, but failed.

then by checking above answers, I use object-fit in CSS:

video {
  object-fit: fill;
}

From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Value: fill

The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.