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:

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