如何使iframe内的Sprout Video完全铺满容器？技术求助

问题分析 #

你的容器宽高比（254px:452px）与视频原生宽高比不匹配，且Sprout Video默认嵌入设置会保持视频比例，导致无法铺满容器。另外你的CSS存在语法错误（.slide的闭合括号写成了{），需先修正这个基础问题。

解决方案 #

步骤1：修正CSS语法错误 #

将.slide的错误闭合括号{改为}：

.slide{
  position: relative;
  width: 254px;
  height: 452px;
}
iframe{
  position: absolute;
  width: 100%;
  height: 100%;
}

步骤2：添加Sprout Video嵌入参数控制视频填充 #

在iframe的src中添加resize=fill参数，该参数会让视频拉伸以填充整个iframe容器：

<div class="slide">
      <iframe src="//videos.sproutvideo.com/embed/119ed9b71910edcb98/af3ed4454a4a14d6?resize=fill" frameborder="0" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

可选：添加overflow:hidden确保无溢出 #

如果视频拉伸后有部分超出容器，给.slide添加overflow:hidden：

.slide{
  position: relative;
  width: 254px;
  height: 452px;
  overflow: hidden;
}

参数说明 #

• resize=fill：强制视频拉伸至iframe的宽高，完全填充容器，可能会改变视频比例。
• 若想保持视频比例同时填充容器（裁剪超出部分），可改用resize=crop参数，视频会按比例放大，自动裁剪掉超出容器的区域，避免变形。

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