HTML5视频自适应需结合CSS、viewport、aspect-ratio、JavaScript及poster优化：一用max-width:100%和height:auto；二配viewport与百分比尺寸；三用aspect-ratio维持比例；四以JS动态监听重设；五借poster与媒体查询提升加载体验。
如果您在网页中使用 HTML5 的 <video> 标签嵌入视频，但发现其在不同设备上无法自动适配屏幕宽度或高度，则可能是由于缺少响应式样式控制或属性配置不当。以下是实现 HTML5 视频自适应宽高的具体方法：
一、使用 CSS 设置 max-width 和 height: auto
该方法通过限制视频最大宽度为父容器的100%，并保持原始宽高比，使视频在不同屏幕尺寸下自动缩放而不变形。
1、在 HTML 中插入 <video> 标签，并为其添加 class 属性，例如 class="responsive-video"。
2、在 CSS 中定义该类：.responsive-video { max-width: 100%; height: auto; display: block; }
立即学习“前端免费学习笔记（深入）”；
3、确保 <video> 标签未设置固定 width 或 height 内联样式，否则会覆盖 CSS 规则。
4、将 <video> 放置在具有明确宽度的容器内（如 div），以触发 max-width 计算。
二、利用 viewport 元标签配合百分比尺寸
该方法依赖于视口元信息与相对单位结合，使视频尺寸随视口变化而动态调整，适用于全屏或占位式布局。
1、在页面 <head> 中添加视口声明：<meta name="viewport" content="width=device-width, initial-scale=1.0">
2、为 <video> 设置 width="100%" height="auto" 属性。
3、在 CSS 中补充：video[width="100%"] { height: auto !important; }
4、若需限制最大高度，可增加 max-height: 70vh 并配合 object-fit: contain 保证内容完整显示。
三、采用 aspect-ratio 属性维持宽高比
现代浏览器支持 aspect-ratio 属性，可显式声明视频容器的固有比例，避免因尺寸变化导致拉伸或裁剪。
1、为 <video> 的父容器（如 <div>）设置 aspect-ratio: 16 / 9;
2、对该父容器设置 width: 100%; height: 0; padding-bottom: 56.25%;（仅用于兼容旧版，非必需）
3、将 <video> 设置为绝对定位，top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
4、确保 video 标签不设置 controlslist="nodownload" 等影响渲染的属性，以免干扰尺寸计算。
四、JavaScript 动态监听窗口变化并重设尺寸
当 CSS 方案无法满足复杂布局需求时，可通过脚本实时读取容器尺寸并更新 video 元素的 style 属性。
1、为 <video> 添加 id，例如 id="adaptiveVideo"
2、编写函数 getContainerWidth()，获取其父元素 clientWidth 值
3、设置 video.style.width = containerWidth + "px"; video.style.height = "auto";
4、在 window.addEventListener("resize", ...) 中调用该函数，并使用 requestAnimationFrame 避免高频重绘
五、使用 poster 属性配合媒体查询优化加载体验
该方法虽不直接改变尺寸逻辑，但能提升自适应场景下的视觉一致性与首屏表现，尤其在移动端弱网环境下至关重要。
1、为 <video> 添加 poster 属性，指向一张与视频宽高比一致的占位图
2、在 CSS 中为 poster 图像设置 background-size: cover; background-position: center;
3、通过媒体查询为小屏幕设备设置 video { width: 100vw; height: auto; }，同时隐藏 controls 在特定断点
4、确保 poster 图像格式为 WebP 或 AVIF，且尺寸不超过 120KB，防止阻塞渲染
