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

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 3

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