title: video not taking 100% width and height of container
body: <p>I have the following HTML code:</p>
  
  <pre><code>&lt;div class="wallpaper-container"&gt;
          &lt;div class="wallpaper-media wallpaper-image native"&gt;
             &lt;!-- &lt;img src="video/space.jpg"&gt; --&gt;
          &lt;/div&gt;
          &lt;div class="wallpaper-media wallpaper-video animated"&gt;
              &lt;video loop muted autoplay&gt;
                  &lt;source src="video/space.webm" type="video/webm"&gt;
                  &lt;source src="video/space.mp4" type="video/mp4"&gt;
                  &lt;source src="video/space.ogv" type="video/ogg"&gt;
              &lt;/video&gt;
        &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and the following CSS:</p>
  
  <pre><code>body  {
      margin: 0;
      padding: 0;
  }
  
  .wallpaper-video  {
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
  }
  
  video  {
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <p>basically i wanted the video to cover 100% of my screen , but it does't , can somebody explain why ? the way it looks in chrome is , as follow:</p>
  
  <p><a href="https://i.stack.imgur.com/IwKZE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IwKZE.jpg" alt="enter image description here"></a></p>
  
  <p>As you can see , the vedio is not taking the 100% width of the container , now of couse the below styles are working:</p>
  
  <pre><code>.wallpaper-video  {
          position: absolute;
          top: 0;
          left: 0;
          height: 100vh;
          width: 100vw;
      }
  </code></pre>
  
  <p>I.E. the container does take <code>100vh</code> and <code>100vw</code> , but somehow the video will not take 100% <code>width</code> and <code>height</code>.</p>
  
  <p>Also the is a horizontal scroll, which is highly undesirable. What am i doing wrong ?</p>