Fully responsive HTML5 video
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>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.
I stumbled upon this answer while trying to find something else on responsive videos. I implemented a responsive video element using similar code.
This link may help make sense of some thingsHeight equals width Pure CSS
Your code could look like this:
#player-overlay { position: relative; &:before { content:''; display: block; padding-top: 50%; // 50% equals a 2:1 ratio. you can read more about // the ratios in the link }}video { bottom: 0; left: 0; position: absolute; right: 0; top: 0; width: 100%;}You can change the ratio by simply changing the padding-top on the before pseudo element.