css - 背景 html5 视频上的响应式顶板

Question

我需要用带有一些不透明度的黑色响应层(我们称之为“阴影层”)覆盖 html5 背景视频。不幸的是，我无法选择视频层的高度，因为它必须绝对定位，所以无法选择父 div 的高度。

有什么建议吗？ JS绝对不受欢迎。这是代码:

html

<div>
    <div class="shadow-layout">
        <div class="content">
            Some content
        </div>
    </div>
    <div id="video-bg">
        <video class="video-bg" autoplay loop poster="">
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
        </video>
    </div>
</div>

CSS

.shadow-layout {
    height: 100%; 
    width: 100%; 
    position: absolute; 
    background: rgba(0,0,0,0.5)
}
.content {
    margin-top: 40px;
    text-align: center;
    color: white;
}
#video-bg, .video-bg {
    width: 100%;
}

...和jsfiddle

Answer 1

尝试将您的 css 更改为此...

.shadow-layout {
    height: 100%; 
    width: 100%; 
    position: absolute; 
    background: rgba(0,0,0,0.5)
}

#video-bg, .video-bg {
   width: 100%;
   height:100%;
   position:absolute;
}

并且你应该关闭你的源代码标签...将你的 html 更改为...

<div>
    <div class="shadow-layout"></div>
    <div id="video-bg">
        <video class="video-bg" autoplay loop poster="">
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"/>
        </video>
    </div>
</div>

在这里工作 JSFiddle http://jsfiddle.net/DivakarDass/k7cqprLz/1/

希望您要求像这样的视频背景。

干杯。