Html 向引导Jumbotron添加视频

我正在尝试将一个视频嵌入一个引导程序jumbotron中，但它并没有出现在我当前拥有的代码的任何地方。我错过了什么

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

---

我将jumbotron的位置设置为相对，将其子对象（视频）设置为绝对。这意味着绝对坐标将相对于巨型火箭本身。我在jumbotron容器上设置相对位置的唯一目的是增加它的z索引，使其位于视频顶部。隐藏了jumbotron上的溢出，这样视频就不会超出边界

享受几年前我在冬天到处吹牛的乐趣吧

#视频背景{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
溢出：隐藏；
z指数：1；
宽度：100%；
}
琼伯伦先生{
位置：相对位置；
溢出：隐藏；
}
.jumbotron.集装箱{
位置：相对位置；
z指数：1；
}

专辑示例
简短的内容

我将jumbotron的位置设置为相对位置，将其子对象（视频）设置为绝对位置。这意味着绝对坐标将相对于巨型火箭本身。我在jumbotron容器上设置相对位置的唯一目的是增加它的z索引，使其位于视频顶部。隐藏了jumbotron上的溢出，这样视频就不会超出边界

享受几年前我在冬天到处吹牛的乐趣吧

#视频背景{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
溢出：隐藏；
z指数：1；
宽度：100%；
}
琼伯伦先生{
位置：相对位置；
溢出：隐藏；
}
.jumbotron.集装箱{
位置：相对位置；
z指数：1；
}

专辑示例
简短的内容

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