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.
It seems to me that I'm going to have try and write a JS solution instead.
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
.