Html iframe或其容器不会以相对方式运行？

我的网页上有两个iFrame。底部都有一个灵活的方向：列容器。这两个容器都位于灵活方向：行容器

我试图在相应的iframe视频上实现两段文字，但我在iframe上遇到了一些棘手的问题

我的iframe是位置：绝对；我的容器是位置：相对的；但是，当我调整视口大小时，同一容器中的文本和容器外的文本都会落在iframe后面并隐藏起来

在我的手机@媒体中，这非常有效。ext in class=quest news固定在iframe的底部，随着iframe尺寸的增加，它会自然向下移动，但在我的tablet@media中，它会将自己隐藏在iframe后面，或者随着我增加视口，它会在页面上越走越远

这里发生了什么事

HTML:

工作小提琴：

我所做的是更改以下项目的样式：

.chan-content {
  position: relative;
  width: 100%;
  margin: 8px 0 0 0;
  display: flex;
  padding-bottom: 56%;
}

对于媒体查询中的同一类：

.chan-content  {
    display: flex;
    position: relative;
    flex: 0 1 auto;
    width: 100%;
    padding-bottom: 0;
 }

---

所以我们使用的是垫底：56%；仅适用于小视口，以保持适当的视频比率。对于最大的视口，不需要这样做，因为每个视频都有适当的底部填充。

如果您希望这样做，请告诉我。太好了！非常感谢。不过，我现在遇到的一个问题是，当我在@media中收缩视口时，iframe上方的文本会在包装器中向下移动页面，并使视频在页面中的高度不一致。

.chan-content {
  position: relative;
  width: 100%;
  margin: 8px 0 0 0;
  display: flex;
  padding-bottom: 56%;
}

.chan-content  {
    display: flex;
    position: relative;
    flex: 0 1 auto;
    width: 100%;
    padding-bottom: 0;
 }