html5视频自适应需结合css、viewport、aspect-ratio、javascript及poster优化：一用max-width:100%和height:auto；二配viewport与百分比尺寸；三用aspect-ratio维持比例；四以js动态监听重设；五借poster与媒体查询提升加载体验。

如果您在网页中使用 HTML5 的

一、使用 CSS 设置 max-width 和 height: auto

该方法通过限制视频最大宽度为父容器的100%，并保持原始宽高比，使视频在不同屏幕尺寸下自动缩放而不变形。

1、在 HTML 中插入

2、在 CSS 中定义该类：.responsive-video { max-width: 100%; height: auto; display: block; }

3、确保

4、将

二、利用 viewport 元标签配合百分比尺寸

该方法依赖于视口元信息与相对单位结合，使视频尺寸随视口变化而动态调整，适用于全屏或占位式布局。

1、在页面

中添加视口声明：

2、为

3、在 CSS 中补充：video[width="100%"] { height: auto !important; }

4、若需限制最大高度，可增加 max-height: 70vh 并配合 object-fit: contain 保证内容完整显示。

三、采用 aspect-ratio 属性维持宽高比

现代浏览器支持 aspect-ratio 属性，可显式声明视频容器的固有比例，避免因尺寸变化导致拉伸或裁剪。

1、为

）设置 aspect-ratio: 16 / 9;

2、对该父容器设置 width: 100%; height: 0; padding-bottom: 56.25%;（仅用于兼容旧版，非必需）

度加AI

度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。

下载

3、将

4、确保 video 标签不设置 controlslist="nodownload" 等影响渲染的属性，以免干扰尺寸计算。

四、JavaScript 动态监听窗口变化并重设尺寸

当 CSS 方案无法满足复杂布局需求时，可通过脚本实时读取容器尺寸并更新 video 元素的 style 属性。

1、为

2、编写函数 getContainerWidth()，获取其父元素 clientWidth 值

3、设置 video.style.width = containerWidth + "px"; video.style.height = "auto";

4、在 window.addEventListener("resize", ...) 中调用该函数，并使用 requestAnimationFrame 避免高频重绘

五、使用 poster 属性配合媒体查询优化加载体验

该方法虽不直接改变尺寸逻辑，但能提升自适应场景下的视觉一致性与首屏表现，尤其在移动端弱网环境下至关重要。

1、为

2、在 CSS 中为 poster 图像设置 background-size: cover; background-position: center;

3、通过媒体查询为小屏幕设备设置 video { width: 100vw; height: auto; }，同时隐藏 controls 在特定断点

4、确保 poster 图像格式为 WebP 或 AVIF，且尺寸不超过 120KB，防止阻塞渲染

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！