覆盖上的CSS文本

Question

所以我有这个代码在我的网站上播放视频。

当我在本地运行时，视频很好，文本就在它上面

当我上传它时代码低于它？

我用z-index 2？将文本带到前面

在网站上它看起来像这个https://gyazo.com/b44cff259296ad76b3542880203bed14本地看起来像这样 - https://gyazo.com/448e05e2e55cc904860cc2c62f0f33cc

所以我对堆栈溢出很新，无法绕过CTRL + K所以这里有2个ghostbin链接。 （对不起）HTML代码 - https://ghostbin.com/paste/87ctg CSS代码 - https://ghostbin.com/paste/cwnsf

body {
  background-color: #000000;
  padding: 0px;
  margin: 0px;
  font-family: "Futura Hv BT";
  overflow-x: hidden;
}

.v-header {
  height: 100vh;
  display: flex;
  align-items: center;
  color: white;
}

.container {
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
  text-align: center;
}

.fullscreen-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.fullscreen-video-wrap video {
  min-width: 100%;
  min-height: 100%;
}

.header-content {
  z-index: 2;

<header class="v-header container">
  <div class="fullscreen-video-wrap">
    <video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">

            </video>
  </div>

  <div class="header-content">
    <h1>gazzy</h1>
    <a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
    <a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
    <button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
  </div>


</header>

Answer 1

我也是web dev的新手，不过我认为如果你尝试文本div周围的边距它可能有用吗？也许尝试：mergin-top:20px;，看看如何编辑文本，如果没有尝试通过这里的步骤：https://www.w3schools.com/howto/howto_css_image_text.asp或尝试这个视频，如果你讨厌像我这样的阅读：https://www.youtube.com/watch?v=edCuCED3Zmo