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，视频显示为背后的背景。所以这就是问题所在：当我右键单击视频时，我可以看到诸如取消静音，全屏，暂停，播放速度，显示/隐藏控件/统计数据，查看/复制视频，保存，共享电子邮件视频等选项。这就是我在z-index: -1;上添加.video-container的原因。但现在我无法在.text div中选择任何文字？！这真是令人沮丧......我添加了javascript / jquery标签，以防有JS解决方案。但是我宁愿接受标记/ css解决方案，因为用户可以随时禁用JS ......

Answer 1

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

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

HTML5视频 - 覆盖其上方的div

1 个答案: