我可以在嵌入的 Vimeo iframe 上添加文字/图像吗？如何？答案

【问题标题】：Can I add words/image over an embedded Vimeo iframe? How?我可以在嵌入的 Vimeo iframe 上添加文字/图像吗？如何？
【发布时间】：2015-06-25 17:20:09
【问题描述】：

作为标题...我什至可以这样做吗？如果是这样，怎么做？我嵌入了一个 Vimeo 视频，但未能在其上添加文字。 Javascript能够使用非常感谢

【问题讨论】：

只需在您的视频标签上添加一个跨度标签。将您的视频标签和跨度标签都放在容器 div 中。 container-div 有position:relative;，video-tag 和span-tag 都有position:absolute; 然后将span 标签设置为你想要的文本。

标签： html iframe embed embedded-resource vimeo

【解决方案1】：

具有绝对位置的文本的解决方案：

#video-container{
  position:relative;
  width:auto;
}

#foreground-text{
  position:absolute;
  top:50%;width:100%;text-align:center;
  margin:0 auto;
  
  color: white;font: bold 20px;

}

<div id="video-container">
  <iframe src="https://player.vimeo.com/video/36477715" width="100%" height="300"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/36477715">Things Programmers Also Know</a> from <a href="https://vimeo.com/bluekeyes">Billy Keyes</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
  <span id="foreground-text">Some text</span>
  
</div>

（视频在 sn-p 帧中不起作用）

您也可以使用 WebVTT 字幕：

【讨论】：

嗨，当视频不是全屏时，这可以正常工作，但是当视频以全屏模式显示时，span 文本被隐藏。使用检查器工具并将指针放在 span 标签上时，可以看到容器，但看不到文本。如何解决这个问题？