在HTML5中实现视频自适应屏幕，核心是通过外层容器控制视频的显示范围，再结合CSS样式让视频尺寸跟随容器变化，同时保证视频的原始比例不被破坏。这种方案可以适配手机、平板、桌面电脑等不同尺寸的设备，避免出现视频溢出或拉伸变形的问题。
基础实现方案：容器包裹+百分比尺寸
最基础的实现方式是给<video>标签添加一个外层容器，通过容器的padding-bottom属性控制宽高比例，再让视频宽度铺满容器，高度自动适配。
HTML结构
首先需要构建正确的HTML结构，将<video>标签放在一个专门的控制容器内：
<!-- 视频外层容器 -->
<div class="video-container">
<video controls>
<source src="test.mp4" type="video/mp4">
您的浏览器不支持HTML5视频播放
</video>
</div>
CSS样式设置
接下来通过CSS设置容器和视频的样式，实现自适应效果：
/* 视频外层容器样式 */
.video-container {
width: 100%; /* 容器宽度占父元素100% */
padding-bottom: 56.25%; /* 16:9比例的容器高度，9/16=0.5625 */
position: relative; /* 为内部视频定位提供参照 */
background-color: #000; /* 容器背景色，避免视频加载前留白 */
}
/* 视频标签样式 */
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%; /* 视频宽度铺满容器 */
height: 100%; /* 视频高度铺满容器 */
object-fit: contain; /* 保持视频原始比例，完整显示在容器内 */
}
关键属性说明
上面的实现中用到了几个核心的CSS属性，理解这些属性的作用可以更好地调整适配效果：
- padding-bottom百分比：padding的百分比是相对于父元素的宽度计算的，设置56.25%可以得到16:9的宽高比容器，如果要其他比例可以自行计算，比如4:3比例对应padding-bottom为75%。
- object-fit：这个属性控制替换元素（如video、img）的内容如何适应容器尺寸，contain表示保持原始比例，完整显示内容，可能会留空白；cover表示保持比例铺满容器，可能会裁剪内容。
- position定位：容器设置relative，视频设置absolute并铺满容器，是为了让视频尺寸完全跟随容器变化，避免视频自身尺寸属性影响自适应效果。
适配不同场景的调整
固定最大宽度场景
如果希望视频在宽屏设备上不超过某个最大宽度，可以给容器添加max-width属性：
.video-container {
width: 100%;
max-width: 1200px; /* 最大宽度限制 */
margin: 0 auto; /* 水平居中 */
padding-bottom: 56.25%;
position: relative;
}
需要铺满容器不留空白场景
如果希望视频铺满容器，即使裁剪部分内容也可以，可以将object-fit改为cover：
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 铺满容器，保持比例，裁剪超出部分 */
}
完整示例代码
下面是一个可以直接运行的完整示例，包含了所有必要的样式和结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5视频自适应示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
}
.video-container {
width: 100%;
max-width: 1200px;
margin: 0 auto 20px;
padding-bottom: 56.25%;
position: relative;
background-color: #000;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h1>HTML5视频自适应屏幕示例</h1>
<div class="video-container">
<video controls>
<source src="https://ipipp.com/test.mp4" type="video/mp4">
您的浏览器不支持HTML5视频播放
</video>
</div>
<p>调整浏览器窗口大小，可以看到视频会跟随窗口尺寸自动适配，始终保持16:9的比例。</p>
</body>
</html>
常见问题说明
为什么视频还是会出现变形？检查是否给video标签设置了固定的width或height属性，应该通过CSS控制尺寸，不要给video标签添加固定尺寸属性。
移动端视频全屏后样式失效？移动端全屏是系统级的全屏，不受页面CSS控制，这是正常表现，退出全屏后会恢复原有样式。
padding-bottom的比例怎么计算？比例计算公式：高度/宽度*100%，比如要1920*1080的比例，就是1080/1920*100%=56.25%。
HTML5_video响应式布局CSS视频自适应修改时间：2026-07-10 06:48:26