Chuck Le Butt Chuck Le Butt - 5 months ago 11
jQuery Question

Fully responsive HTML5 video

Is it possible to have a HTML5 in an absolutely positioned

<video>
element that resizes to the window width and height so that nothing is ever cropped? Lots of the solutions I've seen seem to rely on the
<iframe>
tag, which I don't have, or only resize based on width (which I can already do).

Basically I'm looking for a way to ensure the video is as big as it can be, but also never get cropped if the window is resized -- even in IE9. (Note: I the video has to retain its ratio -- so it's OK if there's black bars.)

This is what I have tried so far.



/*CSS*/

#player-overlay {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000
z-index:999;
}

<!--HTML-->

<div id="player-overlay">
<video width="100%" video="100%" style="width:100%, height:100%">
<source src="../static/video/10s.mp4" />
<source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>





It seems to me that I'm going to have try and write a JS solution instead.

Answer

Use width and max-height on the <video> element:

/*CSS*/ 
video {
  width: 100%;
  max-height: 100%;
}
<!-- HTML -->

<div id="player-overlay">
  <video>
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

http://jsfiddle.net/fHG69/

Also, you're missing a semicolon after background-color. When absolutely positioning an element to fill the screen, I prefer to set top, bottom, left, and right instead of setting height and width.