Question

我正在网站上添加三个<iframe>的YouTube视频。我希望这些视频是彼此相邻的，并且它们是响应性的。

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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;
}

Flexbox具有响应式iframe youtube视频

1 个答案: