CSS 定位/調整 html5 視頻背景

Question

嘿，你們所有的互聯網巫師，過去幾天我一直在努力解決這個問題。

我正在嘗試包含全屏視頻背景，但似乎遇到了障礙。

下面是我試圖完成的圖像。

我嘗試使用視頻元素和 iframe。 當瀏覽器窗口調整大小時，我無法讓下面的 div 總是嵌套在下面。

非常感謝任何幫助或指示。 我得到的最接近的是最小寬度/高度，但它仍然留下了差距......

我最終得到的是第二個 img 中的內容。 視頻隨瀏覽器調整大小，下方有間隙

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 總是高度：100%，div2 總是高度：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;
}