在全屏视频上放置文本

正在进行一个小的自我项目,在将文本放在背景视频的顶部时遇到了一些问题。

目前,准则如下:

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

我正在制作视频全屏,并使用以下JS在不同大小的监视器上显示时保持这种方式

$(document).ready(function () {

  var vid = $('video');
  var vid_w_orig = 1280;
  var vid_h_orig = 720;

  // re-scale image when window resizes
  $(window).resize(function () {
    //Get the parent element size
    var container_w = vid.parent().width();
    var container_h = vid.parent().height();

    //Use largest scale factor of horizontal/vertical
    var scale_w = container_w / vid_w_orig;
    var scale_h = container_h / vid_h_orig;
    var scale = scale_w > scale_h ? scale_w : scale_h;

    //Scale the video to fit any size screen
    vid.width(scale * vid_w_orig);
    vid.height(scale * vid_h_orig);
  });

  //Trigger re-scale of the video on pageload
  $(window).trigger('resize');

});

到目前为止,这种组合对我来说是完美的。唯一的问题是让视频在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;
}

这在很大程度上是可行的,在文字消失在视频后面之前,我可以在一瞬间看到它。

有人给我什么建议吗?

干杯