为何嵌入的4:3视频播放前宽高比显示为2:1？

你遇到的问题核心在于**preload="none"的设置和CSS对尺寸的覆盖**：

1. preload="none"会禁止浏览器预加载视频的元数据（包括视频实际的宽高比信息），播放前浏览器根本不知道视频真实的4:3比例，只能用自身默认的宽高比（这里是2:1）渲染占位空间。
2. 你在HTML里定义的width="768"和height="576"被CSS的width:100%; height:100%;覆盖了——而父元素<figure>默认没有固定高度，height:100%没有有效参照，浏览器只能按默认比例分配视频空间。
3. 点击播放后，浏览器加载到视频元数据，获取到真实的4:3比例，就会自动调整视频尺寸匹配内容，比例也就恢复正常了。

给你三个实用的解决方向，选一个适合你的即可：

方法1：预加载视频元数据 #

把preload="none"改成preload="metadata"，让浏览器提前加载视频宽高比、时长等基础信息，不用等播放就能渲染正确比例：

<video
  src="https://ia800303.us.archive.org/6/items/coughs_and_sneezes_TNA/coughs_and_sneezes_TNA_512kb.mp4"
  width="768"
  height="576"
  preload="metadata"
  controls
></video>

方法2：用CSS强制指定宽高比 #

直接给视频（或其父容器<figure>）设置aspect-ratio属性锁定4:3比例，同时把视频的height设为auto，避免强制100%破坏比例：

video {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
}

这个方法兼容性好，现代浏览器都支持，且不依赖视频元数据。

方法3：老浏览器兼容方案（padding实现比例） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用容器的padding-top百分比模拟固定比例：

figure {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 576/768=0.75，对应4:3比例 */
  margin: 0;
}

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

这种方法通过padding-top的百分比（相对于容器宽度）模拟高度，确保容器始终保持4:3比例，视频填充整个容器。

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