CODEWITHSUNDEEP
videohtml
Jim Jeffers
Jim Jeffers

Reputation: 17930

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

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?

Upvotes: 11

Views: 25824

Answers (6)

Audun
Audun

Reputation: 31

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

Upvotes: 0

Simon Mattes
Simon Mattes

Reputation: 5234

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

Upvotes: 11

Leo Yu
Leo Yu

Reputation: 2867

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.

Upvotes: 0

magikMaker
magikMaker

Reputation: 5607

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

Upvotes: 0

Silvia
Silvia

Reputation: 563

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 .

Upvotes: 8

foolip
foolip

Reputation: 1614

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

Upvotes: 13

Related Questions