我有一个使用 bootstrap 3 的布局。类似于下面的代码。我想在容器后面创建视频背景的效果。如图所示JSFiddle .然而，出于某种原因，视频出现在文本前面，尽管我已经设置了 z-index 这样应该会发生这种情况。我应该更改什么以使视频位于后台？如果您调整视频大小，您可以看到它，以便文本显示在其上方。
<div class="homepage-hero-module fullheight">
<div class="video-container">
<div class="title-container">
<div class="headline">
<h1>Welcome to our Company</h1>
</div>
<div class="description">
<div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
</div>
</div>
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video>
<div class="poster hidden">
<img src="http://www.videojs.com/img/poster.jpg" alt="">
</div>
</div>
</div>
谢谢
编辑:
不知道为什么，但是在我的小型 PC 上，JSFIddle 上的视频不显示，我只看到黑色背景上的白色文本，而在我的大 imac 上，我看到的是文本上方的视频。
最佳答案
这是我用于视频背景的代码。
HTML:
<body>
<video autoplay loop poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid">
<source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm">
<source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
<object>
<embed src="//demosthenes.info/assets/videos/polina.webm" type="video/webm" allowfullscreen="true" allowscriptaccess="always" />
</object>
</video>
<div>
<h4>Content</h4>
</div>
</body>
CSS:
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
-moz-transition: 1s opacity;
-o-transition: 1s opacity;
-webkit-transition: 1s opacity;
transition: 1s opacity;
}
h4{
font-size: 50px;
color: red;
}
工作 fiddle :
文本显示正常，希望这能解决您的问题。
关于html - Bootstrap 容器后面的全屏视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34842413/