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:

<video width="480" height="380" class="ecard" tabindex="0">
   <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="videos/1156 In your honor we'll be dancing.ogv"></source>
   <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="videos/1156 In your honor we'll be dancing.mp4"></source>
</video>

My problem is the video element preserves it's aspect ratio whereas I would prefer to force the playback to fit to frame. Does anyone know a way to do this?

Answer 1

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 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/CSS/Using_CSS_transforms