css - 内容显示在巨型电影中

我正在遵循此答案的建议，使用引导程序在巨型机中放映背景电影：
https://stackoverflow.com/a/34624728/9072894

问题在于该网站的内容显示在巨型电影/电影内部。这是显示问题的小提琴：
https://jsfiddle.net/cortical_iv/kae4q601/228/

例如，下面的<p>中的内容出现在巨型飞轮内部：

<div class="jumbotron">
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="container">
    Hello World. I am in the jumbotron. As I should be.
  </div>
</div>

<p>
Here is my content. It inside the jumbotron. I want it to be outside the jumbotron.
</p>

如何使界限清晰的大片/电影？例如，因此，我的网站的主要内容（如本简单示例中的<p>中的内容一样）出现在巨型机之外？ “ Hello World”注定位于超大型飞机内部。

最佳答案

由于它处于fixed位置，因此无法正常工作。

根据您的要求。您甚至不需要引导jumbotron，并且可以通过普通的CSS实现相同的效果，并且可以使用absolute定位将元素放置在video元素内。检查代码段。

#video-background {
  overflow: hidden;
  z-index: -100;
  width:100%;
  height: 100%;
}

.div--wrapper {
  position: absolute;
  top: 50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="div--wrapper">
    Hello World. I am in the jumbotron. As I should be.
  </div>
</div>

<p>
Here is my content. It outside the jumbotron as it is intended to be.
</p>