使用Flexbox并排嵌入响应式视频：左侧视频高度异常求助

Hey there! 这个问题我之前也碰到过，大概率是两个视频的嵌入iframe本身宽高比不一致，或是Flexbox的布局规则没适配好导致的。咱们一步步来排查解决：

YouTube视频默认是16:9的宽高比，但Facebook的嵌入视频可能自带不同的比例，或者你没给iframe做统一的尺寸约束，Flexbox在拉伸对齐时就会出现高度不一致的情况。

1. 先给每个视频加「宽高比约束容器」 #

通过padding-top的百分比特性来固定16:9的比例（你也可以根据需求改成4:3等其他比例），确保两个视频的高度始终和宽度成比例：

/* 宽高比容器，固定16:9 */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9/16 = 0.5625，对应16:9比例 */
  overflow: hidden;
}

/* 让iframe完全填充容器 */
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

2. 设置Flex容器的响应式规则 #

调整你的外层Flex容器，让两个视频平分宽度，小屏幕自动换行：

/* Flex布局容器 */
.video-container {
  display: flex;
  gap: 1.5rem; /* 可选：给两个视频之间加间距 */
  flex-wrap: wrap; /* 响应式换行 */
  padding: 1rem;
}

/* 让每个视频容器平分宽度，小屏幕最小宽度300px时换行 */
.video-wrapper {
  flex: 1 1 calc(50% - 0.75rem); /* 平分宽度，减去gap的一半 */
  min-width: 300px;
}

3. 调整你的HTML结构 #

把原来的iframe分别放到宽高比容器里：

<div class="video">
  <div class="video-header">
    <h1>VIDEO</h1>
  </div>
  <div class="video-container">
    <!-- YouTube视频容器 -->
    <div class="video-wrapper">
      <iframe src="你的YouTube视频嵌入链接" allowfullscreen></iframe>
    </div>
    <!-- Facebook视频容器 -->
    <div class="video-wrapper">
      <iframe src="你的Facebook视频嵌入链接" allowfullscreen></iframe>
    </div>
  </div>
</div>

• 检查Facebook的嵌入代码有没有自带固定高度的内联样式，如果有的话，一定要覆盖掉（上面的CSS已经通过height:100%强制继承容器高度）；
• 确保Flex容器的align-items属性是默认的stretch（不需要额外设置），这样两个子容器会自动拉伸到同一高度。

这样调整后，两个视频就会保持一致的高度，并且在小屏幕设备上自动换行，完美实现响应式效果~

内容的提问来源于stack exchange，提问作者cubs_fan35