CSS positioning/resizing html5 视频背景

Question

嘿，你们这些互联网奇才，在过去的几天里，我一直在努力解决这个问题。

我正在尝试添加全屏视频背景，但似乎遇到了麻烦。

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

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

非常感谢任何帮助或指点。我得到的最接近的是 min-width/height 但它仍然存在差距...

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

Answer 1

我不确定这是否有效，但是您是否尝试删除 width: 100% 并仅保留 height: 100% ？

如果你能展示代码，我可能会给出更好的建议:p

编辑：由于您希望高度为屏幕高度和宽度可以或多或少，我会说，try

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

Answer 2

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

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 不支持对象匹配

CSS positioning/resizing html5 视频背景

CSS positioning/resizing html5 video background

html

javascript

css

jquery

resize