css - 内容显示在超大屏幕电影中

Question

我正在按照此答案中的建议使用 Bootstrap 在我的超大屏幕中显示背景电影:
https://stackoverflow.com/a/34624728/9072894

问题是网站内容显示在超大屏幕/电影内部。这是一个显示问题的 fiddle :
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”应该位于超大屏幕内。

Answer 1

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

根据您的要求。您甚至不需要 Bootstrap 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>