Question

我有一个全屏div，该div可以播放视频，但要求我在其顶部放一些HTML。但是，无论何时放置此按钮，我都可以看到加载了测试按钮，然后在加载视频时消失了。

我在做什么错了？

摘要：

<div class="row black-bg">
<section class="Splash">
    <div class="video-container">
          <video autoplay muted loop="true">
            <source type="video/mp4" src="/backdropvideo.mp4">
          </video>
    </div>
    <div class="row mt-5" style="z-index:22222;"><button> test </button></div>
</section>

CSS：

.Splash {
    position: relative;
    width: 90vw;
    margin: 0 auto;
    height: 95vh;
    min-height: 710px;
    background: #000;
    overflow: hidden;
    background:black;
}

.video-container {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.gamesplayed {
    background-image: url(assets/GamesBanner.png);
    background-color: black;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width:100%;
    min-height:20vh;
}

.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Answer 1

如果我从测试按钮上的内联样式中删除了z-index，并为mt-5创建了样式规则（我选择了示例中未定义的样式规则，则可以将样式添加为其他样式类（如果需要），则该按钮在视频上仍然可见：

.mt-5 {
    position: absolute;
    top: 5px;
    z-index: 10;
}

显然，取决于页面上其他项目的Z索引，您可能需要进行调整，但是关键是添加了position和top属性

在视频元素上叠加文字

1 个答案: