Question

处理一个小小的自我项目，并且在将背景视频放在背景视频上时遇到一些麻烦。

目前，代码如下：

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

这在很大程度上是有效的，我可以在视频消失后立即看到文本。

有人对我有任何提示吗？

干杯！

Answer 1

您要将整个容器设置为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;
}

将文字放在全屏视频上

1 个答案: