How to have a video take up the viewport height and width?
<p>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. </p>

<p>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. </p>

<p>Here's what I have for the html so far: </p>

<pre><code>&lt;div id="featured"&gt;
        &lt;video poster="assets/poster.jpg" autoplay="true" muted="true" loop&gt;
            &lt;source src="assets/home.mp4" type="video/mp4" /&gt;
        &lt;/video&gt;
&lt;/div&gt;
</code></pre>

<p>And the css: </p>

<pre><code>body, html {
margin: 0px;
padding: 0px;
}

#featured {

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


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

}
</code></pre>