标签没有 size 属性，只有 width 和 height 属性用于控制播放器尺寸；二者定义显示区域大小（像素单位），不改变原始分辨率，且不支持百分比；css 控制更灵活，推荐 max-width: 100%; height: auto; 配合父容器宽度实现响应式；现代方案可用 aspect-ratio + object-fit 精准维持宽高比。
<video></video> 标签没有 size 属性，只有 width 和 height 属性用于控制播放器尺寸。这是常见误解，需先厘清：HTML 规范中不存在 size 这一 video 属性，正确做法是用 width、height 配合 CSS 实现精准控制。
width 和 height 属性的作用与写法
这两个属性直接定义视频播放器的显示区域大小（单位为像素），不改变视频原始分辨率。
- 写法示例：
<video width="640" height="360" controls><source src="demo.mp4" type="video/mp4"></source></video>
- 它们是 HTML5 新增属性，仅接受数值或带单位的字符串（如
"640"或"640px"），不支持百分比（"100%"在部分旧浏览器中可能被忽略）。
用 CSS 控制尺寸更灵活
当需要响应式或动态调整时，CSS 是首选方式：
- 推荐写法（保持宽高比）：
video { max-width: 100%; height: auto; display: block; } - 注意事项：
- 若同时写了内联
width="640"，CSS 的width会覆盖它（除非加!important）； -
height: auto能让高度随宽度等比缩放，避免拉伸变形； - 确保父容器有明确宽度（如
div { width: 80%; }），否则max-width: 100%无效。
- 若同时写了内联
避免常见错误
- ❌ 不要用
width/height缩小高清视频来“节省带宽”——浏览器仍下载完整文件； - ❌ 不要省略
controls，否则用户无法操作； - ❌ 不要在未设
width/height时依赖浏览器自动推算，会导致页面布局抖动； - ❌ 不要混用
object-fit与固定height却不设width，容易引发裁剪或溢出。
想让视频自适应又不失比例？试试这个组合
<div style="width: 100%; aspect-ratio: 16 / 9;"> <video controls><source src="demo.mp4" type="video/mp4"></source></video> </div>
配合 CSS：
div > video {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，按需选择 */
}
这样既响应屏幕变化，又守住 16:9 比例，现代浏览器兼容良好。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
