内容出现在 jumbotron 电影中

Question

我正在按照这个答案的建议使用引导程序在我的 jumbotron 中显示背景电影：
https://stackoverflow.com/a/34624728/9072894

问题是网站的内容显示在 inside jumbotron/电影中。这是一个显示问题的小提琴：
https://jsfiddle.net/cortical_iv/kae4q601/228/

例如，<p> 下面的内容出现在 inside jumbotron：

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

我怎样才能让jumbotron/电影有清晰的界限？例如，我网站的主要内容，比如这个简单示例中<p> 中的内容，出现在jumbotron 之外？ 'Hello World' 意味着在 jumbotron 内。

Answer 1

它没有工作，因为它有一个fixed 位置。

根据您的要求。您甚至不需要引导程序 jumbotron 并且可以使用纯 css 实现相同的功能，并且可以使用 absolute 定位将您的元素放置在 video 元素内。检查sn-p。

#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>