Javascript CSS定位/调整html5视频背景的大小

嘿，所有的互联网奇才们， 在过去的几天里，我一直在努力想办法解决这个问题

我试图加入一个全屏视频背景，似乎我遇到了一个障碍

下面是我试图完成的一个图像

我尝试了视频元素和iframe。调整浏览器窗口的大小时，我无法使下面的div始终嵌套在下面

非常感谢您的帮助或指点。我得到的最接近的是最小宽度/高度，但它仍然留下了一个差距

我最终得到的是第二次img中的SHW。视频会随浏览器调整大小，但下方有间隙

---

我不确定这是否有效，但是 您是否尝试过删除宽度：100%，而仅保留高度：100%

如果您能显示代码：p，我可能会给出更好的建议

编辑： 既然你想让屏幕的高度和宽度都差不多，我想说，试试看

    min-height: 100%;
    width: auto;
    height: auto;

这应该能奏效

新编辑：

body{
  overflow:hidden;
}
#wrapper {
  width: 100%;
  height: 100%;
}

.videoInsert {
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    position: absolute;
    left: 0%;
    top: 0%;
}
video{
      display: inline-block;
    vertical-align: baseline;
      object-fit: fill;
}

---

要防止此问题，您需要执行以下操作：

css:

并将您的视频放入div1：

<div class="div1">
     <video autoplay>...</video>
</div>
<div class="div2">
</div>

到视频标签

---

IE不支持对象匹配

包装{宽度：100%；高度：100%；}

.videoInsert{背景尺寸：封面；高度：100%；左侧：0；最小高度：自动；最小宽度：自动；溢出：隐藏；位置：绝对；顶部：0；宽度：继承；z索引：-100；}

您的浏览器不支持视频标签是否尝试使用最小宽度：100%；最小高度：100%；使用此：。包装{宽度：100%；高度：100%；}.videoInsert{背景大小：封面；高度：100%；左侧：0；最小高度：100%；最小宽度：100%；溢出：隐藏；位置：绝对；顶部：0；宽度：100%；z-index:-100；}我进行了适当的大小调整，但宽度显然没有填满viewportwow，那个物体适合：封面正是我想要的。。。x浏览器对它的支持如何？另外，如果您不介意我问您，我将如何在所有其他内容之上添加宽度约束？比方说，如果我将浏览器的大小调整为特定的宽度，视频将被隐藏，而占位符img将显示为bg img，因为divObject fit无法单独解决问题。您需要包装视频元素并隐藏溢出。和往常一样！IE不支持对象匹配，它正在为Edge构建。请参见此处的浏览器兼容性：如果要更改每个浏览器宽度或高度中的元素样式，请使用“媒体”。这里您可以看到一些示例：例如，如果您想更改浏览器宽度600上的视频和.div1样式，只需写入@media（最大宽度：600px）{video{display:none；}.div1{background color:red；}}}就可以了。。。它工作得很好。如果可以的话，还有一件事。。。如何将海报img添加到div1中，并随视口缩放？我需要显示视频的第一帧，但jpeg是1920x1080，不能随窗口缩放。创建div并将图像设置为背景图像，然后设置背景大小：cover；IE9+支持。
<div class="div1">
     <video autoplay>...</video>
</div>
<div class="div2">
</div>

 object-fit: cover;