Object-fit not affecting video in Edge browser

user_4528318 0
Viewed 3613

I'm using object-fit:cover to play background video on my website (scroll down). Firefox and Chrome are displaying it correctly, but Edge not - although it supports the object-fit property.

.sec-content > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.bg-video {
    position: absolute;
    z-index:4; 
    left: 0;
    top: 0;
    width: calc(50% + 400px);
    height: 100%;
}
.bg-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    box-sizing: border-box;
}
<div class="bgg-2 bg-video">
    <video autoplay="autoplay" muted="muted" playsinline="" loop="loop" poster="/images/2.jpg" class="scroll-video">
        <source src="/files/video-test.mp4" type="video/mp4">
    </video>
</div>

Why is Edge not displaying it like should be?

object-fit microsoft-edge css html
3 Answers

Yep, I faced this problem before. Microsoft Edge doesn't understand object-fit: cover on HTML5 video tags.

Good news: The new Chromium-based version of Edge (still on beta) fixes this bug. In the meantime, if you need to give support to this browser you can use this old-school CSS hack.

.bg-video > video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
user_43903070

object-fit has been shipped in Edge 16 but it seems edge bug I think.

Try this:

.bg-video video {
position: absolute;
top: 0;
left: 0;
width: auto; // changed from 100%
height: 100%;
-o-object-fit: cover;
object-fit: cover;
box-sizing: border-box;
}
user_121507400

You could use fitvids.js to your website. its a possible jQuery solution.

<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>
user_109210140
Related