如何让嵌入的Vimeo视频实现全屏显示？

问题根源在于这两点：

• 100vw会包含浏览器滚动条宽度，加上body默认的margin，容器会超出视口触发横向滚动，视频的height: auto会按原始宽高比自动缩小宽度适配，导致视觉上变小。
• Vimeo的iframe本身有内嵌尺寸限制，单纯设置宽度100%无法突破这个约束。

直接用以下方案就能实现全屏铺满效果：

修改后的代码 #

CSS #

/* 重置全局默认样式，消除body默认margin的干扰 */
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 可选，去掉多余滚动条 */
}

#test {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#testvideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML #

<div id="test">
  <iframe id="testvideo" title="vimeo-player" src="https://player.vimeo.com/video/644036051?h=b260a3b1b0" frameborder="0" allowfullscreen></iframe>
</div>

方案说明 #

• 重置body的margin和padding，避免容器被挤压；overflow: hidden可以移除不必要的滚动条。
• 给容器设置100vw和100vh让它完全覆盖视口，再通过绝对定位让iframe填满整个容器，视频就能自适应铺满屏幕。
• 如果想保留视频原始宽高比（避免拉伸变形），可以改用padding-top实现比例适配：

#test {
  width: 100vw;
  position: relative;
  /* 16:9比例视频，padding-top = 9/16*100% = 56.25% */
  padding-top: 56.25%;
}

#testvideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这种方式会让视频保持宽高比，左右（或上下）留空，但铺满可用的最大宽度（或高度）。

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