Responsive object-fit: cover fix on Chrome

Question

I know there\'s others questions about this, but they are old and not updated with the browsers current support. And they not cover the Chrome particular problem with this.<

Answer 1

I've just hit this myself. It looks like if you wrap your video element in a div and set overflow as hidden, then it'll work around Chrome's bug, i.e. something like:

<div class="wrapper">
  <video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
  </video>
</div>

with css

#bgvid {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

.wrapper {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  overflow: hidden;
}

I've also just found a couple of issues file that seem to be covering Chrome's bug on this:

• https://code.google.com/p/chromium/issues/detail?id=400829
• https://code.google.com/p/chromium/issues/detail?id=441890

Answer 2

This is a Chrome rendering bug (per the Standard8's response). An alternative fix is to set a small border-radius ('0.5px' used to be the smallest value that works but I just tested in Chrome 65 and '0.1px' seems to work now) on the video element. This forces the element down a different (and apparently less buggy) rendering path within Chrome.

The advantage of this fix is that it doesn't require a "shrink-wrapped cropping element" around the video. The disadvantage is that cropping to a slightly rounded rectangle is probably slightly less performant than cropping to a rect.