Menu
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.
/*CSS*/ #player-overlay { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: #000 z-index:999; }<!--HTML--> <div id="player-overlay"> <video width="100%" video="100%" style="width:100%, height:100%"> <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>It seems to me that I'm going to have try and write a JS solution instead.
236
To make an HTML5 video responsive is a little more complex than an image. We can’t just make it mobile-friendly by just adding max-width:100% There are few other things that need to tackle to make it work well on small devices. To scale the Iframe embed or HTML5 video, Both need a different technique to handle their responsiveness.
If the width property is set to 100%, the video player will be responsive and scale up and down: Notice that in the example above, the video player can be scaled up to be larger than its original size.
Basically, when you add a video on your website using HTM5 <video> tag, It will not get in proper size on mobile devices. To make it resize on mobile (Responsive), We need to play with CSS.
If you view the HTML in a browser the video should start playing at its native resolution. To achieve the fullscreen background video we just need to add the following CSS: This sets the width and height of the video to 100% of the viewport and by applying a negative z-index we ensure other elements in the page will display over the 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>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.
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
