html - 水平对齐 youtube 响应式 youtube 视频

Question

我正在尝试使用 flexbox 并排嵌入两个视频(一个来自 youtube，一个来自 facebook)，但我需要让它们响应。我浏览了网站上的其他问题，它们很有帮助，但我仍然对左侧视频显示的高度是右侧视频的 2 倍有疑问。任何人都可以看看并让我知道我做错了什么吗？提前致谢。

<div class="video">
  <div class="video-header">
    <h1>VIDEO</h1>
  </div>

  <div class="youtube-top">

    <div class="video-responsive1">
      <iframe width="650" height="350" src="https://www.youtube.com/embed/gghVoRX-sn0?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

    <div class="video-responsive2">
      <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdjtrentino%2Fvideos%2F10153921589011137%2F&show_text=0&width=560" width="650" height="350" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
    </div>

  </div>
</div>


.youtube-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-responsive1{
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-responsive1 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-responsive2{
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-responsive2 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-responsive1,
.video-responsive2{
  flex: 1;
}

video image - rendering incorrectly

Answer 1

Here's my solution on codepen.

HTML

<div class="video">
  <div class="video-header">
    <h1>VIDEO</h1>
  </div>

  <div class="video-container">

    <div class="video-responsive">
      <div class="aspect-ratio-16-9">
        <iframe src="https://www.youtube.com/embed/gghVoRX-sn0?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>  
      </div>

    </div>

    <div class="video-responsive">
      <div class="aspect-ratio-16-9">
        <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdjtrentino%2Fvideos%2F10153921589011137%2F&show_text=0&width=560" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
      </div>
    </div>

  </div>
</div>

CSS

.video-responsive {
  width: 50%;
  display: inline-block;
  height: 56.25%;
  margin: 0 -1px;
}

.aspect-ratio-16-9 {
  width: 100%;
  padding-top: 56.25%; 
  position: relative;
}

.video-responsive iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

---

一般评论:

1. 你不需要 flex 。 Flex 适用于您不知道内容的宽度，或者您需要垂直对齐内容的情况。使用 display: block 在这里工作得很好， child width: 50%。请注意 margin: 0 -1px，这只是一个快速修复，因为 display: inline-block 会创建额外的水平填充。
2. 您不需要在 HTML 中设置宽度/高度。你可以，我相信有设置它的建议；我的解决方案没有。
3. 您需要一个宽高比类。这会将子项限制在适当的大小。
4. 学习并使用 BEM 进行类命名。使用 video-responsive1 和 2 会使代码更难以阅读和调试，在这种情况下，您甚至不需要它们有所不同。