添加HTML5视频标题后，为什么我的Bootstrap网站的无关部分无法正常呈现？

Question

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

我已使用以下HTML和CSS将标题更改为具有全宽视频背景而非静态图像：

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

添加此视频后，页面底部附近的网站部分我们的客户所说的内容无法正常呈现。我确信这是一个浏览器渲染问题，因为每次重新加载或滚动页面时，它会呈现不同的颜色空间。

这里有两个屏幕截图，向您展示我遇到的渲染问题 - 这是两个单独的重新加载：

我尝试将视频分辨率降低到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仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

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