twitter-bootstrap Bootstrap 视频超大屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34624496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap video jumbotron
提问by Austneal
I'm trying to get a video to cover a bootstrap Jumbotron with no success. This seems like a very simple thing to do, but everything I try seems to fail.
我正在尝试制作一个视频来介绍引导程序 Jumbotron，但没有成功。这似乎是一件非常简单的事情，但我尝试的一切似乎都失败了。
I've tried the solution posted herewith no success. I've also tried just setting the position of the video to absolute, and setting all sides to 0, but that doesn't seem to work either. What am I doing wrong?
我已经尝试过这里发布的解决方案，但没有成功。我还尝试将视频的位置设置为绝对位置，并将所有边设置为 0，但这似乎也不起作用。我究竟做错了什么？
This shows what is going on: https://jsfiddle.net/kae4q601/
这显示了正在发生的事情：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>回答by Jake Taylor
Looks like you've got a lot of unnecessary css going on. To start I would definitely define the jumbotron z-index in order to keep the gray padding in the background.
看起来你有很多不必要的 css 正在进行。首先，我肯定会定义 jumbotron z-index 以保持背景中的灰色填充。
.jumbotron{
position: relative;
z-index:-101;
}
Next some cleaner simpler code for the video background like so:
接下来是一些更简洁的视频背景代码，如下所示：
#video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
width:100%;
}
Here's the fiddle https://jsfiddle.net/kae4q601/5/Let me know if this is what you were trying to achieve.
这是小提琴https://jsfiddle.net/kae4q601/5/如果这就是您想要实现的目标，请告诉我。
回答by Josh Sanger
Since .jumbotronhas a grey background, setting the the video background to z-index: -1000;will make the video display behind the grey background, thus invisible. Also, when making video backgrounds cover, the parent needs to have overflow:hidden, not the video itself.
由于.jumbotron有灰色背景，将视频背景设置为z-index: -1000;会使视频显示在灰色背景后面，从而不可见。此外，在制作视频背景封面时，父母需要拥有overflow:hidden，而不是视频本身。
CSS:
CSS：
.jumbotron{
position: relative;
overflow: hidden;
height: 200px;
}
.container {
position: relative;
color: #ffffff;
z-index: 2; /* Show content above video */
}
#video-background{
position: absolute;
height: auto;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 1;
}
Here is a working fiddle: https://jsfiddle.net/kae4q601/15/
这是一个工作小提琴：https: //jsfiddle.net/kae4q601/15/
