title: Make video fit 100% with any screen resolution
body: <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>