嵌入文本的响应式 YouTube

Question

首先 - 我是 CSS / HTML 初学者，所以对你来说可能很明显 - 对我来说不是 :) 非常感谢你的帮助。

我在响应式 YouTube 嵌入中定位文本时遇到问题。

我想要完成的是：

• 响应式 Youtube 视频可以很好地适应所有分辨率 - 效果很好
• 文本应该放在 Youtube 嵌入的顶部 - 现在它消失在后面
• 文本应位于与视频嵌入相关的相同位置（适用于所有分辨率） - 在我的最后一个示例中，文本应放置在右侧，距 Youtube 嵌入的底端约 25%
• 我想访问 Youtube 嵌入控件（例如，点击暂停等），因此任何覆盖 youtube 嵌入的图层都不会正常
• 我更喜欢html/css的解决方案（没有任何额外的js）

我拥有的来源如下：

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 0px;
  /* size of chrome */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
  <div class="text">
    <h1>
      Example text
    </h1>
  </div>
</div>

如果你们中的一些人能够在文本定位方面提供帮助，我将不胜感激

Answer 1

您的尝试非常接近。我们只需要绝对定位.text 元素并使用一些right 和bottom 属性来对齐它。在下面的示例中，我使用了：

.text {
  position: absolute;
  color: white;
  right: 5%;
  bottom: 25%;
}

我还将.text 颜色更改为white，使其可见，但这可以根据视频中的颜色进行更改。

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 0px;
  /* size of chrome */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.text {
  position: absolute;
  color: white;
  right: 5%;
  bottom: 25%;
}

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
  <div class="text">
    <h1>
      Example text
    </h1>
  </div>
</div>