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
/*CSS*/

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

```html
<!--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.