带有响应式 iframe youtube 视频的 Flexbox

Question

我正在一个网站上添加超过三个 youtube 视频<iframe>。我希望视频彼此相邻并且它们是响应式的。

它在 Chrome 和 IE 上运行良好，但不适用于 Firefox。有人有线索吗？

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

.video-media-youtube-inner-vi01 {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-media-youtube-inner-vi01 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></iframe>
    </div>
    <div class="video-media-youtube-inner-vi02">
      <iframe></iframe>
    </div>
    <div class="video-media-youtube-inner-vi03">
      <iframe></iframe>
    </div>
  </div>
</div>

Answer 1

您应该将所有三个 flex 项都设置为flex: 1or flex: 0 0 33.3333%。

.video-media-youtube-inner-vi01,
.video-media-youtube-inner-vi02,
.video-media-youtube-inner-vi03 {
  flex: 1;
}

或者

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