Text 在全屏视频上放置文本

正在做一个小的自我项目，在将文本放在背景视频上时遇到了一些问题

目前，守则的内容如下：

<div class="video_container">
    <div class="contentContainer">
        <div class="skipButton">
            <h1>Skip</h1>
        </div>

        <video id="tgVideo" autoplay loop>
            <source src="videos/bgvidm4v.m4v" preload="none">
        </video>

    </div>
</div>

到目前为止，这种组合对我来说是完美的。唯一的问题是让视频在Android/iOS上运行，但我认为这是设备的一个限制

我现在需要的是添加一段文字，用户可以点击它将其从视频中移除。在我获得要显示在视频顶部的文本后，我将href添加到按钮中

我在网上找到了一些教程，并尝试了以下方法

.video_container .contentContainer {
    position: absolute;
    width: 100%;
    height:100%;
    background:#000;
    opacity:0.5;
    z-index:999;
}

.video_container .contentContainer .skipButton {
    width:100%;
    text-align:center;
}

.video_container .contentContainer .skipButton h1 {
    color:#FFF;
    text-transform:uppercase;
}

这在很大程度上是有效的，在文字消失在视频后面之前，我可以在瞬间看到文字

有人给我一些建议吗

---

干杯

将整个容器设置为

z-index:999

，此元素

。contentContainer

还包含视频元素。因此，为了使z-index生效，我将仅将z-index放在文本容器上，并使用非静态位置

.video_container .contentContainer {
    position: absolute;
    width: 100%;
    height:100%;
    background:#000;
    opacity:0.5;
    z-index:999; // not needed
}

.video_container .contentContainer .skipButton {
    width:100%;
    text-align:center;
    position: relative;
    z-index: 1000;
}

.video_container .contentContainer .skipButton h1 {
    color:#FFF;
    text-transform:uppercase;
    position: relative;
    z-index: 1000;
}

---

非常感谢您在这方面的帮助！已按上述内容排序。如果我能帮忙，我将非常高兴；）

.video_container .contentContainer {
    position: absolute;
    width: 100%;
    height:100%;
    background:#000;
    opacity:0.5;
    z-index:999; // not needed
}

.video_container .contentContainer .skipButton {
    width:100%;
    text-align:center;
    position: relative;
    z-index: 1000;
}

.video_container .contentContainer .skipButton h1 {
    color:#FFF;
    text-transform:uppercase;
    position: relative;
    z-index: 1000;
}