Fully responsive HTML5 video

Issue

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.

Solution

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

<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>

video {
    width: 100%;
    max-height: 100%;
}

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.

Answered By - gilly3