使用CSS修改Vimeo嵌入视频的黑边背景色（非16:9适配16:9框架）

核心思路 #

由于Vimeo iframe受同源策略限制，无法直接修改其内部元素样式，我们需要通过外层容器实现两个核心需求：固定16:9显示比例、自定义背景色，同时保证不同宽高比的视频不会被裁切。

具体实现步骤 #

1. 给Elementor中的Vimeo模块添加外层容器 #

在Elementor编辑器中，将动态加载Vimeo链接的嵌入模块，放入一个自定义类名的容器中，比如给容器设置类名 vimeo-16-9-wrapper。

2. 编写CSS代码 #

利用CSS的padding-top技巧实现固定16:9比例的容器，同时设置背景色，再让iframe自适应填充容器：

/* 构建16:9固定比例容器 */
.vimeo-16-9-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9比例计算：9÷16=0.5625，即56.25% */
  background-color: #000000; /* 替换为你需要的背景色 */
}

/* 让Vimeo iframe自适应容器 */
.vimeo-16-9-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* 移除iframe默认边框 */
}

3. 优化视频显示效果（可选） #

如果需要隐藏Vimeo默认控件或优化视频边缘显示，可以在嵌入链接末尾添加参数：

• 加入 ?background=1：隐藏视频控件，仅保留视频内容（需视频权限允许）
• 加入 ?color=ffffff：调整控件颜色，使其与自定义背景色匹配

方案说明 #

• 固定比例容器通过padding-top实现，能在任何屏幕宽度下保持16:9的显示框架
• 外层容器的背景色会直接显示在视频上下的留白区域（比如4:3比例视频的上下空白）
• iframe采用绝对定位填充容器，视频会自动居中适配，不会被裁切，完美兼容不同宽高比的内容

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