Question

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

E.g。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

链接实际上不起作用。我不能为我的生活理解为什么不把它包含在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级别并在整个文件中相应地使用它们。

HTML5视频重叠 - 可点击按钮

1 个答案: