如何在流畅嵌入的 YT 视频下添加元素

Question

我这里有一个包含 YT 视频的流畅 iframe，我试图让包含以下描述的跨度“粘”到 iframe 的底部，无论文本长度如何。

这是代码，以便您更好地了解我在说什么。

HTML

<div class="content">
  <div class="video-container">
      <iframe src="https://www.youtube-nocookie.com/embed/kTbVbT9QDkc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <span>My comment or description</span>
  </div>
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-container > span {
    background-color: #f0f2f5;
    padding: 4px;
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 100%;
}

所以我明白问题来自于两个元素（iframe 和 span）都位于“绝对”位置，我正在寻找我找不到的替代解决方案。

当然，我可以将跨度放在 div.video-container 之外，就在它之后，但是我已经发布了相当多的视频，所以如果有解决方案，它将节省我很多工作。 😅

我做了一个CODEPEN

谢谢

Answer 1

到目前为止我找到的唯一解决方案（here）是使用“纵横比”。根据 CanIUse 的说法，它与 94% 的用户兼容。所以我不会更改 HTML 中的任何内容，只更改 CSS 中的几行：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-container iframe {   
  display: block; /* This is to remove the weird space just below the iframe */
  height: 100%;
  width: 100%;
}
.video-container > span {
  background-color: rgba(0,0,0,.3);
  display: block;
  padding: 4px;
}

所以现在，无论内容是什么，跨度都将停留在 iframe 的正下方。这不是一个完美的解决方案，因为它会带来与某些（旧）浏览器的兼容性问题，但就我而言，它比绝对定位解决方案更好。