CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml5-video
Chuck Le Butt
Chuck Le Butt

Reputation: 48758

Fully responsive HTML5 video

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.

Upvotes: 37

Views: 103637

Answers (4)

gilly3
gilly3

Reputation: 91497

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.

Upvotes: 51

Jilani A
Jilani A

Reputation: 168

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

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

Upvotes: 3

Odin13
Odin13

Reputation: 1

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

This link may help make sense of some things Height equals width Pure CSS

Your code could 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 padding-top on the before pseudo element.

Upvotes: 0

DynamicDispatch
DynamicDispatch

Reputation: 421

(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.

Upvotes: 15

Related Questions