Fully Responsive HTML5 Video

Question

Is it possible to have HTML5 in an absolutely positioned <video> element that resizes and widths the window so that nothing is ever cropped? Many of the solutions I've seen seem to rely on the <iframe> , which I don't have, or only change in width (which I can already do).

I'm basically looking for a way to ensure that the video is as large as it can be, but it also never gets cropped if the window size changes - even in IE9. (Note: I video should keep its ratio - so it's normal if there are 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 will try to write a JS solution instead.

Answer 1

Use width and max-height in 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/

In addition, there is no semicolon after background-color . With absolute positioning of the element to fill the screen, I prefer to set top , bottom , left and right instead of setting height and width .

Answer 2

(I know this is an old thread, but I hope my answer helps someone there.)

Actually, you already had the right decision. style="width:100%, height:100%" on your <video> works, except that instead of a semicolon you need a semicolon. (You can remove the redundant attributes width="100%" and video="100%" .)

The reason width: 100%; height: 100% works width: 100%; height: 100% width: 100%; height: 100% (note the semicolon), although the <video> element is stretched, the video itself retains its aspect ratio and has a mailbox / columns inside the <video> element: fooobar.com/questions/ 319284 / ....

The advantage of height: 100% is that the video is placed in the mailbox exactly in the center, while with max-height: 100% video is aligned at the top of the container.

In addition, you must set <video> to display: block . Otherwise, by default it will be display: inline and you will get some space at the bottom of the video for the font descenders: There is a 4px space below the canvas / video / audio elements in HTML5 .

Finally, like @ gilly3, you'll need a semicolon after background-color: #000 . And of course you need to remove display: none . =)

Here's the complete 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 the browser window to see the effect of the mailbox.

By the way, your video sources didn’t work anymore, so I used video samples: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 .

Hope this helps.

Answer 3

I stumbled upon this answer while trying to find something else in responsive videos. I implemented a video sensor using similar code.

This link may help to understand some things. Height is equal to Pure CSS Width

Your code might 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 top of the top layer before the pseudo-element.