twitter-bootstrap 在 div 中嵌入视频作为背景（引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27845467/
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
Embedding video as background in a div (bootstrap)
提问by wiitohzjeh
I am trying to add a video in a div as background (.form-container), in the past I do the same for a full-background page, but in this case I need it only in the div, the problem: dunno how to do it, I was playing with the width, but the video don't cover the full div.
我试图在 div 中添加一个视频作为背景（.form-container），过去我对全背景页面做同样的事情，但在这种情况下，我只在 div 中需要它，问题：不知道如何要做到这一点，我正在玩宽度，但视频没有覆盖整个 div。
This is a full-background video, but obviously don't work. I was trying to play with the z-index, but I am very lost in how twitter-bootstrap handle the z-index:
这是一个全背景视频，但显然不起作用。我试图使用 z-index，但我对 twitter-bootstrap 如何处理 z-index 感到非常迷茫：
#main video {
background: #222;
position: fixed;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transition: 1s opacity;
opacity: 0.5;
}
See the demo: http://codepen.io/wiitohzjeh/pen/vEgmEO?editors=110
看演示：http: //codepen.io/wiitohzjeh/pen/vEgmEO?editors= 110
When I try to change the width to 100% and set the max-height to 250px for 'fit' the div..
当我尝试将宽度更改为 100% 并将最大高度设置为 250px 以“适合”div 时。
#main video {
background: #222;
position: fixed;
width:100%;
max-height: 250px;
transition: 1s opacity;
opacity: 0.5;
}
See the demo: http://codepen.io/wiitohzjeh/pen/LExyEK?editors=110
看演示：http: //codepen.io/wiitohzjeh/pen/LExyEK?editors= 110
回答by Bariel R.
Set your video container to position: relativethen update your video's position to absoluteso that it 'sticks' to the container.
将您的视频容器设置为position: relative然后将您的视频位置更新为absolute使其“粘”到容器上。
#main .form-container {
min-height: 250px;
padding-bottom: 50px;
margin-top: 50px;
-moz-box-shadow: 0 2px 5px 0 #333;
-webkit-box-shadow: 0 2px 5px 0 #333;
box-shadow: 0 2px 5px 0 #333;
position: relative;
overflow: hidden;
}
#main video {
background: #222;
width:100%;
background-size: cover;
transition: 1s opacity;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
