CSS-tag "object-fit:cover" does not crop/clip videos in Chrome
<p>CSS-tag <code>object-fit:cover</code> does not clip/crop videos in Chrome as expected. </p>

<p>This happens only for videos and only in Chrome. 
Images are OK in Chrome. 
In all other tested browsers, images and videos are both working fine.</p>

<p>The behavior should be as shown in this image (<em>top right</em>):
<a href="https://i.stack.imgur.com/1Bf6d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Bf6d.png" alt="https://www.w3.org/TR/2011/WD-css3-images-20110217/img_scale.png"></a></p>

<p>I have <strong><a href="https://jsfiddle.net/xt0xcxzu/5/" rel="nofollow noreferrer">created a demo</a></strong> that shows the wrong behavior.</p>

<p>You see the effect when you change the browser window size. With large height and small width (as well as with small height and large width) the videos start to overlap which is wrong. The images don't overlap and are therefore correct.</p>

<p>Videos (with the bear) should be divided at 50% screen width as the images (screen test pictures):
<a href="https://i.stack.imgur.com/eItRR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eItRR.png" alt="http://oi68.tinypic.com/x5b3vc.jpg"></a>
</p>

<p>The code for the demo -</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="main"&gt;
  &lt;div class="container" style="top:0; left:0"&gt;
    &lt;video autoplay loop&gt;
      &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
  &lt;/div&gt;
  &lt;div class="container" style="top:0%; left:50%"&gt;
    &lt;video autoplay loop&gt;
      &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
  &lt;/div&gt;
  &lt;div class="container" style="top:25%; left:0;"&gt;
    &lt;video autoplay loop&gt;
      &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
  &lt;/div&gt;
  &lt;div class="container" style="top:25%; left:50%"&gt;
    &lt;video autoplay loop&gt;
      &lt;source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
  &lt;/div&gt;
  &lt;div class="container" style="top:50%; left:0"&gt;
    &lt;img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/&gt;
  &lt;/div&gt;
  &lt;div class="container" style="top:50%; left:50%"&gt;
    &lt;img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/&gt;
  &lt;/div&gt;
  &lt;div class="container" style="top:75%; left:0"&gt;
    &lt;img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/&gt;
  &lt;/div&gt;
  &lt;div class="container" style="top:75%; left:50%"&gt;
    &lt;img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>html, body{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  overflow:hidden;
}
.main{
  position:relative;
  width: 100%;
  height: 100%;
}
.container{
  position:absolute;
  width:50%;
  height:25%;
}
img, video{
  position: relative;
  object-fit:cover;  /* This is the mainly problematic line*/
  overflow:hidden;
  width:100%;
  height:100%;
}
</code></pre>

<p>How can this be solved?</p>