在 HTML 视频上叠加的换行文本-解网

问：

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

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>

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

html css html5-视频

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>

在 HTML 视频上叠加的换行文本

Wrapping text overlayed on HTML video

评论

评论