如何调整Vimeo/YouTube视频高度适配容器并兼容不同比例？

问题背景 #

我正在开发一个横向滚动画廊，当前代码如下：

CSS 代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: flex;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 90vh;
  background-color: yellow;
  overflow: hidden;
}

.scrollable-area {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.gallery-items {
  display: flex;
  min-width: 100%;
  height: 100%;
}

.gallery-item {
  flex: 0 0 auto;
  height: 100%;
  object-fit: contain;
  display: flex;
  padding: 10px;
}

.gallery-item img {
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-item iframe {
  width: calc((16 / 9) * 90vh - 40px);
  background-color: red;
}

HTML 代码 #

<div class="gallery-container">
  <div class="scrollable-area">
    <div class="gallery-items">
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Sky_landscape.jpg">
      </div>
      <div class="gallery-item">
        <iframe src="https://player.vimeo.com/video/584985260" frameborder="0" allow="fullscreen"></iframe>
      </div>
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
      </div>
    </div>
  </div>
</div>

目前尝试用calc计算iframe宽度来适配画廊，但这种方式不仅复杂，还无法兼容竖屏或其他比例的视频，请问最优解决方法是什么？

解决方案 #

核心思路是用容器包裹iframe，利用CSS的padding-top百分比特性（基于容器宽度计算）维持视频原始比例，同时让容器自适应画廊的高度限制，无需硬编码比例数值。

修改后的代码 #

CSS 代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: flex;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 90vh;
  background-color: yellow;
  overflow: hidden;
}

.scrollable-area {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.gallery-items {
  display: flex;
  min-width: 100%;
  height: 100%;
}

.gallery-item {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  padding: 10px;
  align-items: center; /* 让内容垂直居中，统一视觉效果 */
}

.gallery-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 新增视频容器样式 */
.video-wrapper {
  position: relative;
  max-height: 100%;
  width: auto;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

HTML 代码

<div class="gallery-container">
  <div class="scrollable-area">
    <div class="gallery-items">
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Sky_landscape.jpg">
      </div>
      <div class="gallery-item">
        <!-- 用容器包裹iframe，通过内联style设置padding-top对应视频比例 -->
        <div class="video-wrapper" style="padding-top: 56.25%;"> <!-- 16:9比例对应56.25% = 9/16*100% -->
          <iframe src="https://player.vimeo.com/video/584985260" allow="fullscreen"></iframe>
        </div>
      </div>
      <!-- 示例竖屏视频 -->
      <div class="gallery-item">
        <div class="video-wrapper" style="padding-top: 177.78%;"> <!-- 9:16比例对应177.78% = 16/9*100% -->
          <iframe src="https://player.vimeo.com/video/xxx" allow="fullscreen"></iframe>
        </div>
      </div>
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
      </div>
    </div>
  </div>
</div>

关键说明 #

1. 比例适配逻辑：

   • padding-top的百分比值由视频比例计算得出：(高度/宽度)*100%，比如16:9对应56.25%，竖屏9:16对应177.78%，只需针对不同视频修改该值即可。
   • 容器设置max-height:100%，确保视频不会超出画廊高度限制，width:auto让容器根据比例自动计算宽度。

2. iframe布局优化：

   • iframe设为绝对定位，占满整个容器空间，保证视频内容完全填充容器，避免黑边（视频比例与容器比例一致时）。

3. 视觉统一性：

   • 给.gallery-item添加align-items:center，让图片和视频在画廊中垂直居中，保持整体布局协调。

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