twitter-bootstrap 如何在具有动态高度的 DIV 容器中制作响应式视频背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38772132/
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
How to make responsive video background in DIV container with dynamic height?
提问by Ste7en
I've been looking for a way to create a video background (preferably an HTML5 / CSS-only solution) for a header DIV on a little micro-site.
我一直在寻找一种方法来为小型微型站点上的标题 DIV 创建视频背景（最好是 HTML5/CSS-only 解决方案）。
Obviously, there are a lot of resources on how to do this if you want a fixed background (position:fixed;) that'll apply to the entire page or if your DIV has a fixed height, but I want to apply it to a single DIV (within the Bootstrap framework, coincidentally) with a dynamic height attribute.
显然，如果您想要一个适用于整个页面的固定背景（位置：固定；）或者如果您的 DIV 具有固定高度，则有很多关于如何执行此操作的资源，但我想将其应用于具有动态高度属性的单个 DIV（在 Bootstrap 框架内，巧合）。
It would have a min-height value of 100vh, but the DIV's height should be able to be larger depending on the content within it (in this scenario, I have a couple of introductory paragraphs that would likely require some scroll on smaller screens).
它的最小高度值为 100vh，但 DIV 的高度应该能够更大，具体取决于其中的内容（在这种情况下，我有几个介绍性段落可能需要在较小的屏幕上滚动）。
I kind of got it half way there with my original approach, but a little bit of my video extends beyond the container DIV and giving the container an overflow:hidden; attribute doesn't help.
我用我原来的方法做到了一半，但是我的一点视频超出了容器 DIV 并给容器一个溢出：隐藏；属性没有帮助。
Here's a CodePenwith the code below + Bootstrap so that you can see what I'm talking about in action.
这是一个带有以下代码的 CodePen+ Bootstrap，以便您可以看到我在说什么。
Screenshot of the video extending into the next DIV, just in case.
This is essentially the pertinant code to my 90% of the way there option... (it looks like the video takes the 100% width this way, but it doesn't crop the height to the container):
这基本上是我的 90% 方式选项的相关代码......（看起来视频以这种方式采用 100% 宽度，但它不会裁剪容器的高度）：
<div class="content contain-header">
<div class="container">
<div class="row main-header">
<video autoplay loop poster="images/clouds.jpg" id="bgvid">
<source src="images/clouds.webmhd.webm" type="video/webm" />
<source src="images/clouds.mp4" type="video/mp4" />
</video>
<div class="col-md-2 col-xs-1">
</div>
<div class="col-md-8 col-xs-10">
<img src="images/logo.svg" class="header-logo" />
<h1 id="header-you">Wow</h1>
<p>Business model canvas rockstar user experience founders handshake. Startup responsive web design bootstrapping first mover advantage disruptive crowdfunding. User experience iteration seed money rockstar holy grail deployment prototype gen-z backing influencer handshake success. Virality growth hacking innovator product management iPad.</p>
<p>Crowdsource marketing non-disclosure agreement graphical user interface bootstrapping market research & development:</p>
<p class="punch">Stratup Ipsum!</p>
<p class="continue"><a href="#next"><span class="glyphicon glyphicon-menu-down"></span></a></p>
</div>
<div class="col-md-2 col-xs-1">
</div>
</div>
</div>
</div>
And the relevant CSS, in SCSS format (+Bootstrap v3.3.5):
以及相关的 CSS，采用 SCSS 格式（+Bootstrap v3.3.5）：
.contain-header {
background-color: rgba(0, 0, 0, 0.6);
.main-header {
min-height:100vh;
display:block;
color:$color-white;
video#bgvid {
position:absolute;
top:50%;
left:50%;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(../images/clouds.jpg) no-repeat;
background-size: cover;
}
video {
display:block;
}
.header-logo {
max-width:40%;
height:auto;
margin:0 auto;
display:block;
padding-top:20px;
}
h1#header-you {
text-transform:uppercase;
text-align:center;
font-family:$tultra;
}
p {
font-size:2rem;
}
p.punch {
font-size:2.3rem;
text-align:center;
margin-top:30px;
}
.continue {
text-align:center;
padding-top:20px;
padding-bottom:40px;
a, a:visited {
color:$color-white;
text-decoration:none;
}
a:hover {
color:$color-gray-icons;
text-decoration:none;
}
}
@media screen and (max-width: 767px) {
p {
font-size:1.4rem;
}
p.punch {
font-size:1.8rem;
}
}
}
}
回答by Davey
Try adding this to the start of your styles
尝试将其添加到样式的开头
.contain-header {
position: relative;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.6);
...
The position relative on the contain-header means that the video min-height, min-width etc. is relative to it.
包含标题上的相对位置意味着视频最小高度、最小宽度等是相对于它的。
