Chrome Version       : 50.0.2661.75 (Offizieller Build) (64-Bit)
URLs (if applicable) : https://jsfiddle.net/xt0xcxzu/5/
Other browsers tested: Firefox 45.0.2, Safari 9.1, both on Mac
  Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
     Safari: OK (Mac: Safari 9.1)
    Firefox: OK (Mac: Firefox 45.0.2)
         IE: (not tested)

What steps will reproduce the problem?

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

I have created a demo that shows the wrong behavior: 
https://jsfiddle.net/xt0xcxzu/5/
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.

What is the expected result?
The behavior should be as shown in this image (top right): 
https://www.w3.org/TR/2011/WD-css3-images-20110217/img_scale.png
=> Videos should be cropped.

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.

What happens instead?
Videos overlap the surrounding div.

Please provide any additional information below. Attach a screenshot if
possible

Screenshot attached.

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

CSS:
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;
  overflow:hidden;
  width:100%;
  height:100%;
}


 

Deleted: Bildschirmfoto 2016-04-17 um 18.13.19.png 249 KB

	Bildschirmfoto 2016-04-17 um 18.13.19.png 249 KB View Download