css - 如何在 HTML5 视频上创建叠加层？

Question

我已经尝试了提供的所有帮助，但仍然无法正常工作。我需要视频为 width: 100% 和 height: 500px 当我尝试提供的其他解决方案时在这里它有效，但视频是中间的居中正方形而不是宽屏幕。

任何帮助将不胜感激。谢谢。

这是我尝试过的:HTML:

<div class="header-unit">
<div id="video-container">
    <video autoplay loop class="fillWidth">
        <video id="video-overlay">gfgfgfgf</video>
        <source src="makak.mp4" type="video/mp4" />
        <source src="http://Dimofinf.net/your-video-file.ogg" type="video/ogg" />
        <source src="http://Dimofinf.net/your-video-file.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>hghgfhgh
</div>
<!-- end video-container -->

SASS kokozino:SASS:

.header-unit 
   height: 500px
   border: 2px solid #000
   border-right: none
   border-left: none
   position: relative
   padding: 20px

#video-container 
   position: absolute
   z-index: 0 

#video-container 
   top: 0%
   left: 0%
   height: 100%
   width: 100%
   overflow: hidden
   position: absolute
   z-index: 1

video 
   position: absolute


video.fillWidth 
   width: 100%

#video-overlay
   position: absolute
   z-index: 2
   width: 600px
   height: 500px
   background: #333

再次感谢您!

Answer 1

我认为您需要将 z-index 的最大值 (z-index: 2147483647;) 添加到您的叠加层元素中。这个技巧将解决您的问题。

查看 this awesome fiddler例子。

  #overlay {
  position: absolute; 
  top: 100px; 
  color: #FFF; 
  text-align: center;
  font-size: 20px;
  background-color: rgba(221, 221, 221, 0.3);
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}

#v {
  z-index: 1;
}