horiontally对齐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适用。使用display: block在这里工作得很好，有孩子width: 50%。请注意margin: 0 -1px，这只是一个快速解决方法，因为display: inline-block将创建额外的水平填充。
2. 您无需在HTML中设置宽度/高度。你可以，而且我确信有建议来设置它;我的解决方案没有它。
3. 您需要一个宽高比等级。这会将孩子限制在合适的大小。
4. 学习并使用BEM进行课程命名。使用video-responsive1＆amp; 2使代码更难以阅读和调试，在这种情况下，您甚至不需要它们与众不同。