Fully responsive HTML5 video

Question

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 1

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.