如何在Plyr.io视频播放器全屏模式下添加视频叠加文本？

要在Plyr视频上添加可全屏显示的叠加文本，核心是利用相对定位的容器承载文本，并通过CSS确保文本在全屏模式下仍能正确定位在视频上方。以下是具体实现步骤：

1. 修改HTML结构 #

在你的视频容器（#vid-cont）内添加一个叠加文本元素，放在<video>标签同级位置：

<div class="js-player" id="vid-cont">
  <video 
       controls
       crossorigin
       playsinline
      class="js-player">
      <!-- Video files -->
       <source
         src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
         type="video/mp4"
         size="1080"
       />
  </video>
  <!-- 新增叠加文本元素 -->
  <div class="video-overlay">这是我的叠加文本</div>
</div>

2. 编写CSS样式 #

通过CSS设置叠加文本的定位、样式，并适配全屏模式：

/* 视频容器设置相对定位，作为叠加文本的定位基准 */
#vid-cont {
  position: relative;
  width: 100%;
  max-width: 800px; /* 可根据需求调整容器宽度 */
}

/* 叠加文本样式 */
.video-overlay {
  position: absolute;
  top: 20px; /* 距离顶部的距离 */
  left: 20px; /* 距离左侧的距离 */
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
  z-index: 999; /* 确保文本在Plyr控件上方（Plyr控件默认z-index约为100） */
  pointer-events: none; /* 避免文本遮挡视频的交互（比如点击播放） */
}

/* 适配全屏模式：当Plyr进入全屏时，确保文本跟随视频铺满屏幕 */
.plyr--fullscreen .video-overlay {
  position: fixed;
  top: 20px;
  left: 20px;
  /* 可选：如果需要文本居中，可替换为top: 50%; left: 50%; transform: translate(-50%, -50%); */
}

3. 效果说明 #

• 叠加文本会固定显示在视频的指定位置（示例中为左上角），不会影响视频的正常播放和控件操作
• 进入全屏模式时，文本会自动适配全屏布局，保持在设定的位置
• pointer-events: none 确保点击文本区域时，事件会穿透到下方的视频控件，不影响交互

如果需要动态修改叠加文本内容，可通过JS直接操作.video-overlay元素的textContent属性即可。

内容的提问来源于stack exchange，提问作者Hannoun