如何让嵌入的Vimeo视频iframe完全填满父容器？

要让Vimeo视频完全填满父容器（允许裁剪），核心是利用CSS的object-fit属性强制视频适配容器尺寸，同时保留比例并裁剪多余部分。具体实现步骤如下：

• 给父容器设置目标尺寸（比如宽100%，高度按需自定义），确保容器能约束内部iframe的显示范围
• 对Vimeo的iframe元素设置宽高100%，通过object-fit: cover实现比例适配与裁剪

完整代码示例 #

HTML结构

<div class="vimeo-wrapper">
  <iframe 
    src="https://player.vimeo.com/video/你的视频ID" 
    frameborder="0" 
    allow="autoplay; fullscreen; picture-in-picture" 
    allowfullscreen
  ></iframe>
</div>

CSS样式

.vimeo-wrapper {
  width: 100%;
  /* 自定义容器高度，比如固定值500px，或用100vh占满屏幕高度 */
  height: 500px;
  overflow: hidden;
}

.vimeo-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* 消除iframe默认的行内元素间隙 */
}

关键说明 #

• object-fit: cover会让视频保持原有宽高比，尽可能填满容器，超出容器边界的部分会被自动裁剪，彻底消除白边
• 如果父容器的宽高比和视频原生比例不一致，视频边缘区域会被裁掉，但主体内容会居中显示在容器内
• 无需修改Vimeo嵌入代码的默认参数，用CSS即可完全覆盖iframe的原始尺寸设置

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