我正在尝试制作一个视频来覆盖 bootstrap Jumbotron，但没有成功。这似乎是一件非常简单的事情，但我尝试的一切似乎都失败了。
我已经尝试过发布的解决方案here没有成功。我也尝试过将视频的位置设置为绝对位置，并将所有边设置为 0，但这似乎也不起作用。我究竟做错了什么？
这显示了正在发生的事情：https://jsfiddle.net/kae4q601/
.jumbotron{
position: relative;
/* Tried setting the height. Didnt work either */
/* height: 200px; */
}
#video-background {
position: absolute;
bottom: 50%;
right: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<video id="video-background" preload muted autoplay loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<div class="container">
Hello World
</div>
</div>
看起来你有很多不必要的CSS。首先，我肯定会定义大屏幕 z 索引，以便将灰色填充保留在背景中。
.jumbotron{
position: relative;
z-index:-101;
}
接下来是一些更清晰、更简单的视频背景代码，如下所示：
#video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
width:100%;
}
这是小提琴https://jsfiddle.net/kae4q601/5/让我知道这是否是您想要实现的目标。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
