如何拉伸iframe嵌入视频使其强制占满整个浏览器宽度？

Vimeo、Youtube的嵌入页自带响应式适配逻辑，会强制内部<video>元素铺满整个iframe视口，因此不会出现留白。自定义CDN托管的视频播放页没有添加对应适配规则时，浏览器会默认按视频原始宽高比渲染<video>标签，未被视频覆盖的区域会露出播放器默认的灰色背景——这个问题和外层iframe本身是否设为100%宽高没有关系，问题出在iframe加载的内部页面。

场景1：可修改iframe src指向的自定义视频播放页源码 #

这是最彻底的解决方式，直接在嵌入页内添加以下样式规则：

1. 重置页面默认边距，让页面和视频标签强制铺满容器

/* 嵌入到iframe的视频页内部CSS */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
video {
  width: 100%;
  height: 100%;
  /* 按需选择object-fit取值：
  fill: 无视原宽高比拉伸，完全填满容器无灰边
  cover: 保留原宽高比，裁剪多余内容填满容器无灰边
  contain: 保留原宽高比，完整显示视频内容，可能存在留白
  */
  object-fit: fill;
  background: #000; /* 将默认播放器灰色背景改为黑色，统一观感 */
}

2. 如果使用了第三方播放器SDK（如video.js、plyr），需要给播放器容器同步设置100%宽高，禁止写死固定宽高值：

/* 替换为你实际使用的播放器容器类名 */
.video-js, .plyr, .player-container {
  width: 100%;
  height: 100%;
}

场景2：无法修改iframe加载的视频页源码，仅能调整外层页面 #

跨域场景下无法直接通过外层页面修改iframe内部的元素样式，可选择以下两种方案：

• 方案A：放弃iframe嵌入方式，直接在当前页面使用原生<video>标签加载CDN视频地址，给video标签添加上述100%宽高+object-fit: fill样式即可，可控性更高。
• 方案B：必须使用iframe时，按视频原始宽高比搭建响应式外层容器，让iframe本身的显示比例和视频原始比例完全匹配，从根源上避免灰边：

/* 外层页面CSS */
.iframe-wrap {
  position: relative;
  width: 100%;
  /* 按视频实际比例计算padding-top值，例如16:9比例视频取值为 9/16*100% = 56.25%，4:3比例为75% */
  padding-top: 56.25%;
}
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

该方案的缺点是无法实现无视原比例的拉伸效果，视频会始终保持原始宽高比显示。

• 不要尝试通过JS跨域获取iframe内部的video元素修改样式，跨域安全策略会直接拦截这类操作，抛出权限错误。
• 使用object-fit: fill拉伸视频时，不会影响播放器控制栏的显示比例，控制栏会正常铺满iframe宽度。

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