javascript - Flexbox 和响应式 iframe

Question

当我在 flexbox 中插入响应式 iframes 时，我试图保持 16:9 的比例。

.video-media-youtube-inner {
  display: flex;
  flex-wrap: wrap;
}

div[class^="video-media-youtube-inner-vi"] {
  flex: 0 0 50%;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

div[class^="video-media-youtube-inner-vi"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-media-youtube">
  <div class="video-media-youtube-inner">
    <div class="video-media-youtube-inner-vi01">
      <iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
    </div>
    <div class="video-media-youtube-inner-vi02">
      <iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
    </div>
    <div class="video-media-youtube-inner-vi03">
      <iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
    </div>
  </div>
</div>

但是，正如您从代码片段中看到的那样，iframe 宽度已正确缩小，但 height 始终保持不变。是否可以在 flexbox 元素中保持 16:9 的比例？

Answer 1

尝试添加一个额外的 <div> <iframe>周围小号:

.video-media-youtube-inner {
  display: flex;
  flex-wrap: wrap;
}

div[class^="video-media-youtube-inner-vi"] {
  flex: 0 0 50%;
}

div[class^="video-media-youtube-inner-vi"] .sixteen-by-nine {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

div[class^="video-media-youtube-inner-vi"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-media-youtube">
  <div class="video-media-youtube-inner">
    <div class="video-media-youtube-inner-vi01">
      <div class="sixteen-by-nine">
        <iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
      </div>
    </div>
    <div class="video-media-youtube-inner-vi02">
      <div class="sixteen-by-nine">
        <iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
      </div>
    </div>
    <div class="video-media-youtube-inner-vi03">
      <div class="sixteen-by-nine">
        <iframe src="//www.youtube.com/embed/8AHCfZTRGiI"></iframe>
      </div>
    </div>
  </div>
</div>

另一方面 - 也许您正在使用我不熟悉的约定，但我认为只使用像 video-media-youtube-inner 这样的一致类会更标准，也更易于维护。为你的内心<div> s 然后为它们分配唯一的 id小号(vi01，vi02，vi03)。这样，您就可以通过 .video-media-youtube-inner 访问它们在你的 CSS 中，或者 #vi01如果您需要针对特定​​目标。