Make video fit 100% with any screen resolution
<p>I have a video with the following properties, Frame width: 1920 and Frame Height: 1080. I need its width and height to be 100% thus filling up the whole screen. And it needs to be responsive too. So far, I have this code :</p>

<pre><code>&lt;video class="hidden-xs hidden-sm hidden-md hidden-custom videosize embed-responsive-item" autoplay="autoplay" loop="loop"&gt;
    &lt;source src="~/Videos/myvideo.mp4" type="video/mp4" /&gt;
&lt;/video&gt;
</code></pre>

<p>css:</p>

<pre><code>   .videosize {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; 
    height:100vh;
}
</code></pre>

<p>With the code above it fits perfectly with a 1680 x 1050 screen resolution, however with other resolution, it takes up 100% of the height then the width adjusts leaving white spaces on both sides.</p>

<p>Any idea ? Thanks.</p>