如何让iframe默认视频缩略图100%适配9:16比例的包裹容器？

问题根因 #

外层容器通过padding技巧实现的9:16竖屏比例计算逻辑正确，视频播放阶段可正常保持无黑边效果。错配原因来自谷歌云盘嵌入页的初始渲染规则：

• 视频未加载时，嵌入页内部的默认缩略图布局，为硬编码适配16:9横屏视口的逻辑
• 无论外层iframe传入的视口尺寸是多少，初始阶段的缩略图都会以高度撑满视口，宽度按16:9的横屏比例计算，自然会在9:16的竖屏容器中出现宽度撑不满、左右留白的效果

具体实现步骤 #

1. 补充修正现有CSS的细节缺口 #

在原有样式基础上补充必要属性，消除iframe与容器的尺寸偏移：

.potrait_9by16 {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 保持原有逻辑：9:16竖屏下，高度相对宽度为16/9≈177.78% */
  padding-bottom: 177.777%;
}

.potrait_9by16 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 补充属性消除浏览器默认样式带来的尺寸偏差 */
  border: 0;
  display: block;
}

2. 修改嵌入链接参数，移除硬编码横屏布局 #

谷歌云盘默认的嵌入链接格式为 https://drive.google.com/file/d/[视频ID]/preview，在链接末尾追加两个参数，即可强制嵌入页内部的缩略图、播放器全部适配iframe传入的实际视口尺寸，无需手动设置自定义缩略图：

https://drive.google.com/file/d/[你的视频ID]/preview?wmode=transparent&autoplay=0

参数作用说明：

• wmode=transparent：移除谷歌播放器默认的硬编码横屏固定容器，让内部所有元素相对于iframe视口做尺寸匹配，从根源上解决缩略图硬按横屏比例渲染的问题
• autoplay=0：保持默认不自动播放的逻辑，不改变原有交互体验

3. 偏差兜底适配 #

如果按上面两步调整后，仍存在极小的缩略图尺寸偏移，可补充下面的CSS规则做兜底，不会对视频播放效果产生任何影响：

.potrait_9by16 iframe {
  object-fit: cover;
}

所有调整仅会修正初始缩略图的渲染逻辑，视频播放阶段的比例适配、无黑边效果会和原有实现完全一致。

内容的提问来源于stack exchange，提问作者infernus-85