Bootstrap自定义视频嵌入比例及max-height失效问题求助

问题说明 #

已成功嵌入4x5比例的非标准Bootstrap视频，但无论是给iframe还是外层div设置max-height都不生效，全屏显示时竖版手机视频会出现过高的问题。

核心原因 #

Bootstrap 4的embed-responsive组件通过padding-bottom百分比维持宽高比，容器高度由宽度计算得出（比如4x5比例的padding-bottom为125%，即高度=宽度×1.25），这种情况下max-height无法直接限制容器高度，因为padding的计算优先级高于max-height。

解决办法 #

方案一：使用CSS aspect-ratio（现代浏览器推荐） #

用CSS原生aspect-ratio属性替代Bootstrap的padding-bottom方案，直接控制宽高比，同时max-height可正常生效：

1. 修改自定义CSS：

/* 替换原有的embed-responsive-4by5 */
.custom-ratio-4by5 {
  aspect-ratio: 4/5; /* 直接设置宽高比 */
  max-height: 80vh; /* 生效的最大高度 */
  width: 100%;
  position: relative;
}

.custom-ratio-4by5 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持视频比例，避免拉伸 */
}

2. 修改对应HTML结构：

<div class="carousel-item">
  <div id="phone" class="vidbox custom-ratio-4by5">
    <iframe src="https://player.vimeo.com/video/912417077?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

方案二：兼容旧浏览器的混合方案 #

若需兼容不支持aspect-ratio的旧浏览器，可在外层添加限制容器，同时调整embed-responsive内部样式：

1. 添加额外CSS：

/* 外层限制容器 */
.video-max-height {
  max-height: 80vh;
  overflow: hidden;
  width: fit-content; /* 让容器宽度由内容比例决定 */
  margin: 0 auto; /* 居中 */
}

/* 保留原embed-responsive-4by5，调整内部iframe */
.embed-responsive-4by5 {
  padding-bottom: 125%;
  position: relative;
  width: 100%;
}

.embed-responsive-4by5 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

2. 修改HTML结构：

<div class="carousel-item">
  <div class="video-max-height">
    <div id="phone" class="vidbox embed-responsive embed-responsive-4by5">
      <iframe src="https://player.vimeo.com/video/912417077?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

补充说明 #

• 两种方案均需保留iframe的object-fit: contain，避免视频拉伸变形；
• 方案一的aspect-ratio不支持IE浏览器，需兼容IE时建议使用方案二；
• 可根据需求调整max-height数值（示例中80vh表示占视口高度的80%）。

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