Fully responsive HTML5 video

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.

(I know this is an old thread, but I hope my answer helps someone out there.)

Actually, you had the correct solution already. The style="width:100%, height:100%" on your <video> works, except you need a semicolon there instead of a comma. (You can remove the redundant width="100%" and video="100%" attributes.)

The reason that width: 100%; height: 100% works (note the semicolon) is that, even though the <video> element is stretched, the video itself keeps its aspect ratio and is letterboxed/pillarboxed inside the <video> element: https://stackoverflow.com/a/4000946/5249519 .

The advantage of height: 100% is that the video is letterboxed exactly in the center, whereas with max-height: 100% the video is aligned to the top of the container.

Also, you should set your <video> to display: block. Otherwise, it defaults to display: inline and you'll get some white space at the bottom of the video for the font descenders: There is a 4px gap below canvas/video/audio elements in HTML5 .

Finally, like @gilly3 said, you need a semicolon after background-color: #000. And, of course, you need to remove display: none. =)

Here's the full solution:

/*CSS*/

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

video {
  display: block;
  width: 100%;
  height: 100%;
}

<!--HTML-->

<div id="player-overlay">
  <video controls>
    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.ogv"  type="video/ogg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4"  type="video/mp4">
    <source src="http://techslides.com/demos/sample-videos/small.3gp"  type="video/3gp">
  </video>
</div>

Run the code snippet in "full page" mode and resize your browser window to see the letterboxing effect.

By the way, your video sources weren't working anymore, so I used sample videos from: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 .

Hope that helps.