带有响应式 iframe youtube 视频的 Flexbox

Question

我正在开发一个网站，以添加超过三个 <iframe> 的 youtube 视频。我希望视频彼此相邻并且响应迅速。

它在 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: 1 或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;
}