HTML5视频-在其上方覆盖div

最新推荐文章于 2024-06-12 20:49:37 发布

盛振宇啊

最新推荐文章于 2024-06-12 20:49:37 发布

阅读量909

点赞数

文章标签： html5 javascript 前端

原文链接：https://stackoverflow.com/questions/31193586/html5-video-overlay-a-div-above-it

版权

所以我有以下代码：

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

.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 ...
最佳答案

对元素进行Z索引编制时，您需要确保对要分层的其他元素进行Z索引编制。


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