视频背景覆盖文字问题

Question

我对这段代码感到沮丧已经有一段时间了。这是情况。我正在使用Google的以下代码。我的文字一直朝着我的视频背景上方的顶部前进。这是css文件。

 *{
  box-sizing: border-box;
}

body{
  margin:0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size:1rem;
  font-weight:normal;
  line-height:1.5;
  color:#333;
  overflow-x:hidden;
}


 .fullscreen-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
  }

  .fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
  }

  @media (min-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
      height: 300%;
      top: -100%;
      background-position: center;
      background-size: cover;
    }
  }

  @media (max-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
      width: 300%;
      left: -100%;
    }
  }

  @media (max-width: 576px) {
    .fullscreen-bg {
        background: linear-gradient(to bottom,  #3c1053, #ad5389);
        background-repeat: no-repeat;
        background-size: cover;
        opacity: .9;
        height: 600px;
    }

    .fullscreen-bg__video {
      display: none;
    }
  }

  @media (min-width: 576px) {
    .header-overlay{
      height:100vh;
      position: absolute;
      top:0;
      left:0;
      width:100vw;
      z-index:1;
      background:#225470;
      opacity:0.85;
    }


  .hero {
    position: relative;
    display: none;
  }
}

@media(max-width: 576px){
  .nohero {
    display: none;
  }
}

@media(min-width: 576px){
.header-content{
  z-index:2;
  position: relative;
  margin-top: 250px;
}

.header-content h1{
  font-size:50px;
  margin-bottom:0;
  color: #ffffff;
}

.header-content p{
  font-size:1.5rem;
  display:block;
  padding-bottom:2rem;
  color: #ffffff;
}

.btn{
  background: #34b3a0;
  color:#fff;
  font-size:1.2rem;
  padding: 1rem 2rem;
  text-decoration: none;
}
}


.section{
  position: relative;
  margin: 0 auto;
  padding:20px 0;
  width: 100vh;
  height: 100vh;
}

.section-b{
  background:#333;
  color:#fff;
}

@media(max-width:960px){
  .container{
    padding-right:3rem;
    padding-left:3rem;
  }
}

我也正在分享我的HTML代码。

    <div class="">
            <div class="fullscreen-bg">
                <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
                <source src="frontend/videos/video.mp4" type="video/mp4">
            </video>
            <div class="header-overlay"></div>
            <div class="header-content nohero">
                <div class="container mx-auto">
                    <div class="flex flex-col justify-center items-center">
                        <h1>Welcome Everyone</h1>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id temporibus perferendis necessitatibus numquam amet impedit explicabo? Debitis quasi ullam aperiam!</p>
                        <a class="btn">Find Out More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header>
<div class="container mx-auto hero">
    <div class="flex-col justify-between items-center mt-20">
        <h1 class="text-white text-5xl font-medium">Hello Everyone</h1>
        <img src="/frontend/images/banner.png" alt="" class="mt-32">
    </div>
</div>

现在的问题是，我已经将其设计为用作移动屏幕的渐变背景，以及用作台式机和ipad的视频背景。我可以向您展示该网站，但是现在我只需要这个小帮助。