最稳妥的视频自适应方案是用css设置width: 100%和height: auto；现代浏览器推荐父容器设aspect-ratio，video设width: 100%、height: 100%及object-fit。
直接给 <video></video> 标签加 width="100%" height="auto" 是最常见但**最容易出错的做法**——它只在特定结构下生效，且现代项目中已不推荐。
用 CSS 控制 width 和 height:auto 最稳妥
这是兼容性最好、行为最可预测的方式。关键不是写在 HTML 属性里，而是用 CSS 声明：
-
width: 100%让视频宽度随父容器变化 -
height: auto强制浏览器按原始宽高比计算高度，避免拉伸 - 必须确保父容器有明确宽度（比如
div没设display: inline或float） - 删掉
<video></video>上所有内联的width/height像素值，否则会覆盖 CSS
示例：
<div class="video-wrapper"> <video src="demo.mp4" controls></video> </div>
.video-wrapper video {
width: 100%;
height: auto;
display: block;
}
用 aspect-ratio + object-fit 实现精准比例控制
如果你知道视频原始比例（如 16:9），aspect-ratio 是现代方案首选。它不依赖 JS 或 padding 技巧，语义清晰、计算可靠。
-
aspect-ratio: 16 / 9写在<video></video>的父容器上（不是<video></video>自身） -
<video></video>本身只需width: 100%; height: 100%，再配object-fit: contain或cover -
contain保证全部内容可见，可能留黑边；cover填满但可能裁剪边缘 - 注意：Safari 15.4+、Chrome 88+、Firefox 89+ 支持，旧版需降级 fallback
示例：
<div class="video-container"> <video src="demo.mp4" controls></video> </div>
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: contain;
}
别踩这些坑
很多“自适应失败”其实卡在细节上：
- 父容器没设宽度（比如
div是inline或没内容撑开），width: 100%就没参照物 - 用了
object-fit: fill却没意识到它会强行拉伸变形，尤其在移动端横竖屏切换时明显 - 在
<video></video>上同时写width="640"和 CSSwidth: 100%，后者虽优先但容易被误判为“没生效” - 想用
max-width: 100%防越界？必须配合height: auto，单写max-width不解决高度问题 - 全屏时视频被裁剪？检查父容器是否设了
overflow: hidden，全屏是脱离文档流的，但某些浏览器仍受其影响
真正难的不是写哪一行 CSS，而是判断该用哪种组合：静态页面够用就用 width: 100%; height: auto；需要强控比例且支持现代浏览器，aspect-ratio 加 object-fit 更干净；如果还要兼容 IE 或 Safari 14 及更早版本，就得退回 padding-bottom + 绝对定位的老方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
