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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)