html - 将视频添加到 Bootstrap Jumbotron

Question

我正在尝试将视频嵌入到引导超大屏幕中，但它并没有出现在我目前拥有的代码的任何地方。我错过了什么？

<section class="jumbotron text-center">
            <video id="video-background" preload muted autoplay loop>
                        <source src="/images/vacation.mp4" type="video/mp4">
                    </video>
            <div class="container">
                <h1 class="jumbotron-heading">Album example</h1>
                <p class="lead text-muted">Something short </p>
                <p>
                    <a href="#" class="btn btn-primary my-2">Main call to action</a>
                    <a href="#" class="btn btn-secondary my-2">Secondary action</a>
                </p>
            </div>
        </section>

还有我的 CSS

#video-background {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: -100;
            width: 100%;
        }

Answer 1

我将 jumbotron 位置设置为相对位置，将它的子项(视频)设置为绝对位置。这意味着绝对坐标将相对于超大屏幕本身。我在 jumbotron 容器上设置了相对位置，其唯一目的是增加它的 z-index 以位于视频顶部。隐藏超大屏幕上的溢出，这样视频就不会超出边界。

欣赏我几年前在冬天吹牛的样子!

#video-background {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: 1;
            width: 100%;
        }

.jumbotron {
  position: relative;
  overflow: hidden;
}

.jumbotron .container {
  position: relative;
  z-index: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="jumbotron text-center">
  <video id="video-background" preload muted autoplay loop>
    <source src="http://james-allen.ca/brap.mp4" type="video/mp4">
  </video>
  <div class="container">
    <h1 class="jumbotron-heading">Album example</h1>
    <p class="lead text-muted">Something short </p>
    <p>
      <a href="#" class="btn btn-primary my-2">Main call to action</a>
      <a href="#" class="btn btn-secondary my-2">Secondary action</a>
    </p>
  </div>
</section>