我需要在包含 HTML 5 视频的 div 顶部覆盖一个 div。在下面的示例中，覆盖 div 的 id 是“video_overlays”。请参阅下面的示例：
<div id="video_box">
<div id="video_overlays"></div>
<div>
<video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>
</div>
</div>
这是一个精简的示例，使用尽可能少的 HTML 标记。
基础
-
覆盖层由提供:before上的伪元素.content容器。
-
不需要 z-index，:before自然地分层在视频元素上。
-
The .content容器是position: relative所以这样position: absolute覆盖层是相对于它定位的。
-
覆盖层被拉伸以覆盖整个.contentdiv 宽度与left / right / bottom and left set to 0.
-
视频的宽度由其容器的宽度控制width: 100%
The Demo
.content {
position: relative;
width: 500px;
margin: 0 auto;
padding: 20px;
}
.content video {
width: 100%;
display: block;
}
.content:before {
content: '';
position: absolute;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="content">
<video id="player" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/18/Big_Buck_Bunny_Trailer_1080p.ogv/Big_Buck_Bunny_Trailer_1080p.ogv.360p.vp9.webm" autoplay loop muted></video>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
