Fully responsive HTML5 video

Question

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.

Solution 1

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.

Solution 2

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

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

The reason that width: 100%; height: 100% works (note the semicolon) is that, even though the <video> element is stretched, the video itself keeps its aspect ratio and is letterboxed/pillarboxed inside the <video> element: https://stackoverflow.com/a/4000946/5249519 .

The advantage of height: 100% is that the video is letterboxed exactly in the center, whereas with max-height: 100% the video is aligned to the top of the container.

Also, you should set your <video> to display: block. Otherwise, it defaults to display: inline and you'll get some white space at the bottom of the video for the font descenders: There is a 4px gap below canvas/video/audio elements in HTML5 .

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

Here's the full 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 your browser window to see the letterboxing effect.

By the way, your video sources weren't working anymore, so I used sample videos from: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 .

Hope that helps.

Solution 3

You should use this CSS for the proper solution- If you use height: auto; It'll cover your container.

video {
  width: 100%;
  height: auto;
}

Comments

[Blazemonger]

css-tricks.com/NetMag/FluidWidthVideo/… -- second result on a Google search.

[Chuck Le Butt]

This works great these days: embedresponsively.com

[Burndog]

This works well except when in a responsive condition like Bootstrap moves to a single column. At that point the height became 1px so I would suggest at least some minimum height in the #player-overlay style. For instance; min-height:200px;