Css 如何在HTML5视频上创建覆盖？

我已经尝试了所有提供的帮助，但仍然无法使其发挥作用。 我需要的视频宽度：100%，高度：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 -->

---

再次感谢你们

我认为您需要添加z-index的最大值z-index:2147483647；在您的覆盖元素中。这个把戏会解决你的问题

查看示例

  #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;
}

---

不，没用。这实际上是我试过的。那可能是浏览器有问题。这个例子在你的浏览器中有效吗？@Nymph fiddler中的例子有效，但视频居中，而不是100%宽度。有没有办法在Fiddler上制作100%宽度的示例？我已经成功了。我把GFGF放在视频容器下，效果很好。但我真的很感谢你们的帮助。一堆！

  #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;
}