如何避免Vimeo视频播放器iFrame在JS设置尺寸时重复加载

• 首次加载：HTML解析到带src属性的iframe时，自动发起Vimeo视频资源请求
• 二次加载：JS逻辑中直接修改iframe元素的原生width/height属性，该操作会触发iframe重新加载src对应的资源

最小改动方案（仅改2处，无兼容性问题） #

1. 给CSS新增规则，让iframe自动撑满父容器：

.dc-video-content iframe {
  width: 100%;
  height: 100%;
}

2. 删除JS代码末尾两行修改iframe原生宽高属性的逻辑：

// 移除以下两行代码即可
iframe.width = newVideoWidth
iframe.height = newVideoWidth * aspectRatio;

调整后父容器.dc-video-content已经通过JS计算了正确宽高，iframe会自动适配尺寸，不会触发二次加载。

无JS优化方案（性能更优） #

如果可以提前获取视频的原始宽高比（示例中的Vimeo视频比例为16:9），可以直接用CSS实现自适应，完全移除JS逻辑，从根源避免加载问题：

/* 新增/调整以下规则 */
.dc-video-content {
  width: 33.33%; /* 等价于原JS中的容器宽度1/3逻辑 */
  aspect-ratio: 16/9; /* 替换为对应视频的实际宽高比 */
}
.dc-video-content iframe {
  width: 100%;
  height: 100%;
}

调整后直接删除所有相关JS逻辑即可。

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