Html 对象匹配不影响边缘浏览器中的视频

我正在使用

object-fit:cover

播放背景视频（向下滚动）。Firefox和Chrome都正确显示了它，但Edge却没有，尽管它支持

对象匹配

属性

.sec content>div{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.bg视频{
位置：绝对位置；
z指数：4；
左：0；
排名：0；
宽度：计算（50%+400px）；
身高：100%；
}
.bg视频{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
-o-对象配合：盖；
对象匹配：覆盖；
框大小：边框框；
}

您可以将其用于您的网站。这是一个可能的jQuery解决方案

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

$（文档）.ready（函数（）{
//以.container、.wrapper、.post等为目标。
$（“#与视频有关的东西”）.fitVids（）；
});

是的，我以前遇到过这个问题。Microsoft Edge不理解HTML5视频标签上的

对象适合性：cover

好消息：新的基于铬的Edge版本（仍在测试版）修复了这个bug。同时，如果你需要支持这个浏览器，你可以使用这个老式的CSS黑客

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

---

objectfit

已在Edge 16中发布，但我认为它似乎是Edge bug

试试这个：

.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;
}

---

高度：自动工作，宽度：自动不完全填充父容器。JotaEle hack也能用——我不知道该用哪一种我会看，哪一个是赢家，如果你的代码中有输入错误-

z-inde-4。你的意思是键入
z-index:4？