jquery - HTML5 视频重叠——带有可点击的按钮

Question

我有一个要在网站上显示并使用 HTML5 视频的视频。我想要做的是有重叠，但是，我想要一个按钮/链接，当您单击它时，您可以找到更多信息。

例如

.outer-container {
    border: 1px dotted black;
    width: 100%;
    height: 100%;
    text-align: center;
}
.inner-container {
    border: 1px solid black;
    display: inline-block;
    position: relative;
}
.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 10px;
    padding: 5px 5px;
    font-size: 20px;
    font-family: Helvetica;
    color: #FFF;
    background-color: rgba(50, 50, 50, 0.3);
}
video {
    width: 100%;
    height: 100%;
}

<div class="outer-container">
    <div class="inner-container">
        <div class="video-overlay">Bug Buck Bunny - Trailer  
         <br />
         <br />
          
          <a href="http://www.google.com">Find out more</a>
        </div>
        <video id="player" controls
        src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" autoplay loop></video>
    </div>
</div>

该链接实际上无效。我一辈子都无法理解为什么不包含在一个 div 中。这个功能可能吗？希望尽量避免使用 javascript 强制链接。

Answer 1

您必须对该按钮进行 z-index。

.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 10px;
    padding: 5px 5px;
    font-size: 20px;
    font-family: Helvetica;
    color: #FFF;
    background-color: rgba(50, 50, 50, 0.3);
    z-index: 5;
}

https://jsfiddle.net/5n1vvzee/

您完全定位了该按钮，并且由于文档流，视频容器在概念上覆盖了它，即使它仍然可见。

编辑

@JonasGrumann 在评论中提出了一个很好的观点。为 z-index 值分配随机数是一种不好的做法。如果您正在使用像 Bootstrap 这样的现代 CSS 框架，它通常会通过框架中的实用程序类或 SASS/LESS 变量为您处理这些值。

如果您没有使用这些框架之一，明智的做法是养成在 CSS 文件顶部某处添加注释以指定 z-index 级别并在整个文件中相应地使用它们的习惯。