How to have a video take up the viewport height and width?

Question

I want to have my site play a video which takes up the full viewport. Not 100% of the body, just the viewport. So you can scroll down and view other content. Similar to how mediaboom.com does it.

I've managed to make the video take up the full viewport (and no more), which is what I'm aiming for. But it's not responsive. Meaning the video should remain centered when the window is resized. But it gets cut off.

Here's what I have for the html so far:

<div id="featured">
        <video poster="assets/poster.jpg" autoplay="true" muted="true" loop>
            <source src="assets/home.mp4" type="video/mp4" />
        </video>
</div>

And the css:

body, html {
margin: 0px;
padding: 0px;
}

#featured {

max-height: 100vh;
overflow: hidden;
text-align: center;
}


video {
    min-width: 100%;
    min-height: 100%;

}

Answer 1

You can use object-fit: cover in your CSS, only catch is that there is no IE support. It's effectively the same as background-size: cover, though! https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 2

Unlike the object-fit: contain/cover , this one work on IE/Edge as well

As mentioned in a comment, to mimic contain use max-width/max-height instead. Also note, the sample video takes a few seconds to load

Sample that mimic object-fit: cover

 html, body { margin: 0; } #wrapper{ position: relative; height: 100vh; overflow: hidden; } #featured { position: absolute; width: calc(100vh * (1000 / 562)); /* video width / height */ height: calc(100vw * (562 / 1000)); /* video height / width */ min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

 <div id="wrapper"> <div id="featured"> <video poster="assets/poster.jpg" autoplay="true" muted="true" loop> <source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" /> </video> </div> </div>

Sample using object-fit

 html, body { margin: 0; } #featured { position: relative; height: 100vh; overflow: hidden; } video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* or contain */ }

 <div id="featured"> <video poster="assets/poster.jpg" autoplay="true" muted="true" loop> <source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" /> </video> </div>

Answer 3

I am not sure if I got your question correctly, but I tried your code changing min-width:100%; and min-height:100%; for width:100%; and height:100%; and the window resizes correctly.

EDIT:

I am sorry but I don't know where to look in mediaboom.com there is a lot of stuff there.

But if you want:

• To keep aspect ratio of the video.
• Have the video as tall as the viewport lets you.
• Crop the width of the video if necessary, but keep the video centered
• Add more elements under the video div which you can reach by scrolling

Then try with this. If it isn't the solution it might get you closer:

body, html {
            margin: 0px;
            padding: 0px;
            width: 100%;
        }

        #featured {
            width: 100wh;
            height: 100vh;
            position: relative;
        }


        video {
            width:100wh;
            height: 100Vh;
            display:inline-block;
            position: absolute;
            top:50%;
            left:50%;
            margin-right: -50%;
            transform: translate(-50%,-50%);
        }