javascript - HTML5 视频 - 在其上方覆盖一个 div

Question

所以我有以下代码:

<div class="content">
    <div class="video-container">
        <video controls="true" autoplay="autoplay" loop="loop" muted="muted" preload="auto">
            <source src="/videos/bg-video.mp4" type="video/mp4">
            <source src="/videos/bg-video.ogv" type="video/ogv">
            Please upgrade your browser so that it supports HTML5 videos.
        </video>
    </div>
    <div class="text"><!-- ... --></div>
</div>

这就是 CSS:

.content {
    position: relative;
    z-index: 5;
}

.video-container {
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

video {
    z-index: -1;
    height: auto;
    position: relative;
    min-height: 100%;
    min-width: 100%;
}

因此 .text div 用作页面的实际内容。它是页面中间的一个 div，视频显示为它后面的背景。所以这是问题所在: 当我右键单击视频时，我可以看到取消静音、全屏、暂停、播放速度、显示/隐藏控件/统计信息、查看/复制视频、保存、共享电子邮件视频等选项。这就是我在 .video-container 上添加 z-index: -1; 的原因。但是现在我无法在我的 .text div 中选择任何文本？!这真是令人沮丧...我添加了 javascript/jquery 标记以防有 JS 解决方案。但是我宁愿接受标记/CSS 解决方案，因为用户可以随时禁用 JS...

Answer 1

当对一个元素进行 z 索引时，您需要确保对您正在分层的其他元素也进行 z 索引。

.text{
    position: relative;
    z-index: 9;
}