0

When I set my html5 video width and height to 100%, the video height is bigger than the browser visible area and a vertical scrollbar appears.

Is it because my video is in 4:3 format? How can I resize it to fill the entire space without having to scroll down the page?

Thanks for reading!

0x17
  • 131
  • 1
  • 3
  • 10
  • Possible duplicate to this [posting](http://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site) – Automate This Sep 10 '13 at 14:13

1 Answers1

0

You will need to check the browser window height with javascript and limit your video to be smaller than that. Here is the fiddle HTML:

<video id="vid1" controls>
    <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

CSS:

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

Javascript:

window.onresize = function(event) {
  var h=window.innerHeight;  
  document.getElementById("vid1").style.maxHeight=h+"px";  
}
Chris
  • 171
  • 4
  • I added this code but it doesn't do what I'm trying to accomplish, it just changes when I resize the browser. I want the video to fit the browser 100% horizontally and vertically when the page loads. Thanks anyway. – 0x17 Sep 11 '13 at 15:46