CSS定位/调整html5视频背景

Question

嘿，所有互联网的巫师， 在过去的几天里，我一直在努力解决这个问题。

我正在尝试包含全屏视频背景，但似乎遇到了障碍。

下面是我想要完成的图像。

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

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

我最终得到的是第二张图片中显示的内容。视频随浏览器调整大小，下方有空隙

Answer 1

为防止出现问题，您需要这样做：

css:

.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}

并将您的视频放入 div1：

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

它不允许视频元素在溢出时显示。并且 div1 始终是 height:100% 而 div2 始终是 height:100%。

如果您想将视频放入 div1 中添加

 object-fit: cover;

到视频标签。

IE 不支持对象匹配

Answer 2

我不确定这是否可行，但是 您是否尝试过删除 width: 100% 而只保留 height: 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;
}