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，以便它可见，但这可以根据视频中的颜色进行更改。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

响应式YouTube嵌入了文字

1 个答案: