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;）的最大值添加到overlay元素中。这个技巧将解决你的问题。

查看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;
}

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

1 个答案: