How can I stretch html5 video to full height?

Question

I have a simple html5 video player. I would like to stretch the video height to user screen height.

I have tried a lots of things, for ecxample this one:

    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */

But its not working. There is a living demo here:

http://boxy2.com/testvideo.php?url=http://boxy2.com/3n9?download_token=e99fdb10c5a929aa30d0f497d07f260eb16b511503b4520a4bdd48385b048b88&ad=0

That's my problem when I click on fullscreen it follows only the WIDTH property and not the height. If I remove width:100%, than its' size is about 300px height even on fullsrcreen.

Answer 1

The correct solution to this is to use now is to use object-fit:fill via CSS on the <video> tag.

video {
  object-fit: fill;
}

Answer 2

CSS

video { height: 100vh; min-height: 100%; }

Most videos are 16:9 ratio, so in order to increase the height to the edges of the screen, you end up with a cropped view. The closest ratio to what you want is the old TV format of 4:3.

vh and vw are layout lifesavers here's more on viewport height and viewport width.

Answer 3

If you're looking for a full-height sol'n that always covers content area:

demo

html

<header role="banner">
  <div id="wrapper-video">
    <video poster="" autoplay loop>
      <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/cut.mp4"           
        type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
    </video>
  </div>
</header>

css

section[role="banner"] {
  position: relative;
  width: 100%;
}
#wrapper-video {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -100;
}
#wrapper-video video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

edit - working in Opera