Vimeo嵌入21:9视频播放时padding异常调整引发圆角显示问题求助

我们在首页嵌入了一个21:9宽高比的Vimeo视频，设置顶部padding为42.41%，完整代码如下：

<div style="padding:42.41% 0 0 0 !important;position:relative;"><iframe src="https://player.vimeo.com/video/849145174?h=0e12ee14c7&color=ec477f&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

页面加载时视频显示正常，但点击播放后，padding会被调整至约43%，导致圆角显示异常。在开发者工具中取消再勾选padding或display属性，视频会恢复正常播放。下方还有一个16:9（顶部padding为56.25%）的视频示例，该视频播放时不会出现padding调整的问题。

• 固定容器padding优先级，阻止脚本修改：给视频容器添加自定义类名（如vimeo-21-9-container），通过外部CSS规则以更高优先级锁定padding值，替代内联!important：

.vimeo-21-9-container {
  padding-top: 42.41% !important;
  position: relative !important;
}

这样Vimeo脚本修改内联样式时会被CSS类规则覆盖，保持比例稳定。

• 嵌套容器隔离样式影响：在现有容器外层添加父容器，将圆角、溢出控制等布局属性放在父容器上，内部容器仅负责比例控制：

<div style="border-radius: 12px; overflow: hidden;">
  <div style="padding:42.41% 0 0 0 !important;position:relative;">
    <iframe src="https://player.vimeo.com/video/849145174?h=0e12ee14c7&color=ec477f&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

即使内部容器padding被修改，外层带圆角的容器不受影响，避免显示异常。

• 通过Vimeo API强制锁定尺寸：给iframe添加id属性，初始化播放器后监听resize事件，强制重置容器padding：

const player = new Vimeo.Player('vimeo-player');
player.on('resize', () => {
  document.querySelector('.vimeo-21-9-container').style.paddingTop = '42.41%';
});

主动干预播放器的尺寸变化逻辑，维持21:9比例。

• 排查Webflow全局样式冲突：在开发者工具中查看播放后容器的样式变更来源，确认是否存在Webflow全局样式触发padding计算异常，针对性添加覆盖规则。

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