移除Vimeo嵌入视频两侧间隙的问题

我明白你现在遇到的问题——想让Vimeo视频作为容器背景铺满，但两侧总是留间隙，强行拉宽高又会过度裁剪，这确实挺头疼的。咱们来一步步调整你的代码，完美解决这个问题：

问题根源分析 #

你当前的CSS里，aspect-ratio: 16 / 9 和 width: 100%; height: 100%、min-width/min-height:100% 混在一起，导致视频被限制在容器的尺寸内，无法根据自身比例缩放来完全覆盖容器，最终出现两侧间隙。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>vimeo background-style embed</title>
  <style>
    /* reset */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body, html {
      height: 100%;
    }
    .container {
      position: relative;
      width: 70%;
      height: 500px;
      overflow: hidden;
      margin: 200px auto;
      background: red;
    }
    .responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      min-width: 100%;
      min-height: 100%;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <iframe class="responsive-iframe" 
            src="https://player.vimeo.com/video/***********?background=1&autoplay=1&loop=1&muted=1&controls=0" 
            frameborder="0" 
            allow="autoplay; fullscreen; picture-in-picture" 
            allowfullscreen 
            title="Vimeo Background">
    </iframe>
  </div>
</body>
</html>

关键修改说明 #

1. 调整视频定位逻辑：
   移除了原有的 transform: translate(-50%, -50%)、width:100%、height:100% 和 aspect-ratio，改用 top:0; left:0; right:0; bottom:0; margin:auto，让视频自动在容器中居中对齐。
2. 强制覆盖容器：
   保留 min-width:100%; min-height:100%，确保视频的最小宽高至少填满容器——如果容器的宽高比和视频（16:9）不一致，视频会自动缩放，超出容器的部分会被容器的 overflow:hidden 裁剪，同时完全消除两侧间隙。
3. 保留必要属性：
   继续使用 pointer-events: none，避免视频干扰容器上的其他交互元素。

额外注意事项 #

• 确保Vimeo iframe的参数正确：background=1、muted=1 是背景视频的必需参数，浏览器的自动播放策略要求视频静音才能自动播放；
• 容器的 overflow:hidden 必须保留，否则视频超出容器的部分会显示在页面上；
• 这种方案是背景视频的标准实现：优先保证视频完全覆盖容器，同时保持自身比例，超出部分合理裁剪，不会出现拉伸变形的问题。

内容来源于stack exchange