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
.