为什么在添加 HTML5 视频 header 后我的 Bootstrap 站点的不相关部分无法正确呈现？

Question

我一直在定制 this existing Bootstrap based website template 以创建我自己的网站。

我已使用以下 HTML 和 CSS:

将 header 更改为具有全宽视频背景而不是静态图像

<!------------- Background Video ----------------->
<div class = "video-container">
  <video preload = "true" autoplay = "autoplay" loop= "loop" volume = "0" poster = "bokeh.jpg">
   <source src = "video/bokeh.mp4" type = "video/mp4">
   <source src = "video/bokeh.webm" type = "video/webm">
  </video>
</div>

CSS

.video-container{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
video{
    position: relative;
    z-index: -1;
    opacity: 0.78;
    width: 100%;
    margin: auto;
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}

添加此视频后，页面底部附近的网站部分 客户评价 无法正确呈现。我确定这是浏览器渲染问题，因为每次重新加载或滚动页面时它都会呈现不同的白色块 space。

这是两个屏幕截图，向您展示了我遇到的那种渲染问题 - 这是在两次单独的重新加载时：

我曾尝试将视频的分辨率降低到 360p，但这没有帮助。一旦我删除视频，渲染问题就会消失。

有什么想法吗？！

Answer 1

请尝试删除 z-index：

.video-container{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
video{
    position: relative;
    opacity: 0.78;
    width: 100%;
    margin: auto;
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}

z-index 属性指定元素的堆叠顺序。

堆叠顺序较高的元素始终位于堆叠顺序较低的元素之前。

注意：z-index 仅适用于定位元素（position:absolute、position:relative 或 position:fixed）。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

为什么在添加 HTML5 视频 header 后我的 Bootstrap 站点的不相关部分无法正确呈现？

Why is an unrelated section of my Bootstrap site not rendering properly after adding a HTML5 video header?

html

css

html5-video