在 HTML 视频上覆盖文本

Question

我正在尝试将文本覆盖在视频元素之上。到目前为止我的代码是：

body {
  margin: auto;
  text-align: center;
  background-color: black;
  line-height: 0;
}

.container {
  position: relative;
  display: grid;
  height: 100%;
}

.container video {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 8vw;
  font-family: Arial, Sans-Serif;
  opacity: 25%;
  z-index: 1;
}

<div class="container">
  <video type="video/mp4" src='data:video/mp4;base64,...'>Your browser does not support the video tag.</video>
  <div class="overlay">
    <p>OVERLAY TEXT</p>
  </div>
</div>

这非常有效。然而，唯一的问题是，当覆盖文本变得太长时，它不会换行到下一行，而是堆叠在自身之上。有没有办法对其进行样式设置，以便覆盖文本换行到下一行，并且整个覆盖保持在视频的中心？谢谢！

Answer 1

由于您使用的是 Grid，因此不需要绝对定位：

body {
  margin: auto;
  text-align: center;
  background-color: black;
  line-height: 0;
}

.container {
  display: grid;
  grid-template-areas: "video";
  place-items: center;
}

.container video {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
  width: 100%;
  height: auto;
  grid-area: video;
}

.overlay {
  grid-area: video;
  color: white;
  font-size: 8vw;
  font-family: Arial, Sans-Serif;
  opacity: 25%;
}

<div class="container">
  <video type="video/mp4" src='data:video/mp4;base64,...'>Your browser does not support the video tag.</video>
  <div class="overlay">
    <p>OVERLAY TEXT</p>
  </div>
</div>