video标签的width/height属性不生效，主因是css样式（如max-width:100%）覆盖html属性，且第三方视频用iframe而非video标签，需控制iframe尺寸；推荐用css设置宽高并配合object-fit等属性实现响应式适配。
video 标签的 width 和 height 属性为什么有时不生效
直接写 width="640" 和 height="360" 确实能控制尺寸，但前提是视频源没带 controlslist="nodownload nofullscreen" 或其他强制缩放逻辑，更关键的是：浏览器会优先尊重 CSS 中的 max-width: 100%（尤其在响应式页面里）。很多 CMS 或前端框架默认给 video 加了这类样式，导致 HTML 属性被覆盖。
实操建议：
- 先用浏览器开发者工具检查
video元素是否被 CSS 覆盖 —— 看 computed 样式里的width和height实际值 - 若被覆盖，要么加
!important（临时调试可用），要么改用内联样式：<video style="width: 640px; height: 360px;"></video> - 避免只设
width不设height，否则比例失真；也不建议只设height，因为多数视频宽高比固定，高度变化会拉伸画面
用 CSS 控制 video 尺寸比用 HTML 属性更可靠
CSS 提供了更灵活、可复用的控制方式，也更容易适配不同设备。HTML 的 width/height 属于过时的呈现属性，现代项目应优先用 CSS。
常见可靠写法：
- 固定尺寸：
video { width: 640px; height: 360px; } - 等比缩放（推荐）：
video { width: 100%; height: auto; max-width: 640px; }—— 容器变窄时自动缩小，保持宽高比 - 响应式全宽（如文章页）：
video { width: 100vw; height: auto; }，但注意加max-width: 100%;防止溢出父容器
注意：object-fit: cover; 或 contain; 只影响视频内容如何填满框体，不改变 video 元素自身尺寸，需配合宽高一起用。
嵌入 YouTube 或 Vimeo 视频时不能直接改 video 标签
这类第三方视频不是用原生 video 标签加载的，而是 iframe。你看到的播放器是远程页面，本地 HTML 的 width/height 属性对它无效。
正确做法是控制 iframe 自身尺寸：
- YouTube 分享代码里自带
width和height，直接改那两个数字就行 - 更稳妥的是用 CSS：
iframe { width: 100%; height: 56.25vw; }（16:9 比例），并包裹在带position: relative;的容器里，再用padding-bottom: 56.25%;+ 绝对定位实现响应式占位（即“padding-top 技巧”） - 别忘了加
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"，否则部分功能（如全屏）在 iOS 上会被禁用
移动端视频尺寸异常的典型原因
在手机上视频突然撑满屏幕或缩成一条线，大概率不是代码写错，而是以下几处细节没处理好：
-
viewportmeta 缺失或错误，比如漏了width=device-width，导致浏览器用桌面视口渲染，尺寸计算全乱 - 父容器用了
display: flex但没设flex-shrink: 0，视频被强行压缩 - iOS Safari 对
video默认加了max-width: 100%且不可覆盖（除非用!important），所以必须显式写width: 100% !important;才能撑满 - 视频源本身分辨率极低（如 320×240），在高清屏上被放大后模糊，看起来像“尺寸不对”，其实是源问题
最省事的兜底方案：给 video 加 style="width: 100% !important; height: auto !important;"，再用媒体查询微调断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
