title: Overflow: hidden for HTML5 Video
body: <p>I am trying to hide the overflow of an HTML5 video that is wrapped in a container. However there are still scroll bars in firefox and chrome. When I try to recreate the issue in <a href="https://jsfiddle.net/taq50t2p/" rel="nofollow">Jsfiddle</a>, it works fine (no scrollbars), but the same code in firefox or chrome creates a scroll and does not hide any overflow.</p>
  
  <p>Any idea how I can get the overflow of an HTML5 video to hide, and why it's not working? PS. I have tried changing the position of the container to various things and have tried breaking <code>overflow: hidden</code> down to <code>overflow-x</code> and <code>overflow-y</code></p>
  
  <pre><code>&lt;div class="video_container"&gt;
  &lt;video autoplay loop controls muted="true"class="video_window"&gt;
    &lt;source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4"&gt;
  Your browser does not support the video tag.
  &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.video_container{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -100;
      overflow:hidden
  
  }
  
  video{
        position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  
  }
  
  
  @media (min-aspect-ratio: 16/9) {
    video {
       height: 300%;
          top: -100%;
    }
  }
  
  @media (max-aspect-ratio: 16/9) {
    video{
       width: 300%;
      left: -100%;
    }
  }
  </code></pre>