How can I stretch html5 video to full height?

Issue

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.

Solution

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.

Answered By - zer00ne