html5视频铺满容器的基础实现
要让html5的video元素铺满容器，核心思路是先给容器设置明确的尺寸，再让video元素的宽高都占满容器空间。如果容器本身没有固定尺寸，video的100%宽高就无法找到参考基准，自然无法实现铺满效果。
基础代码结构
首先我们需要准备一个容器元素和内部的video标签，容器的尺寸决定了视频铺满的范围，这里先以铺满整个视口为例：
<!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;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
/* 视频容器，占满整个视口 */
.video-container {
width: 100%;
height: 100%;
}
/* video元素设置宽高100%铺满容器 */
.video-container video {
width: 100%;
height: 100%;
/* 可选：去除视频默认的控制栏 */
/* controls: none; */
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay muted loop playsinline>
<source src="https://ipipp.com/video/sample.mp4" type="video/mp4">
您的浏览器不支持html5 video标签
</video>
</div>
</body>
</html>
关键样式说明
上面的代码中，核心样式逻辑分为两部分：
- 首先给
html</code>和<code>body</code>设置width:100%、height:100%，同时清除默认的margin和padding，保证根元素能占满整个浏览器视口。 - 视频容器.video-container同样设置width:100%、height:100%，继承根元素的尺寸，成为video的参考基准。
- 最后给video标签设置width:100%、height:100%，让视频的宽高完全等于容器的宽高，实现铺满效果。
解决视频拉伸变形的问题
直接设置width:100%和height:100%可能会导致视频比例和原始比例不一致，出现拉伸变形的情况。这时候可以配合object-fit</code>属性来调整视频的适配规则。
object-fit常用属性值
| 属性值 | 效果说明 |
|---|---|
| fill | 默认值，视频拉伸填满容器，可能会变形 |
| contain | 保持视频原始比例，完整显示视频，容器可能会有留白 |
| cover | 保持视频原始比例，铺满容器，超出部分会被裁剪 |
| none | 视频保持原始尺寸，不缩放，超出容器部分被裁剪 |
如果希望视频铺满容器且不变形，最常用的就是设置object-fit: cover</code>，修改后的video样式如下：
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例铺满容器，超出部分裁剪 */
}
不同场景下的适配方案
铺满固定大小的容器
如果不需要铺满整个视口，而是铺满一个固定大小的div容器，只需要给容器设置明确的宽高即可，video的样式不需要修改：
<style>
.fixed-container {
width: 800px;
height: 450px;
margin: 50px auto;
/* 防止视频超出容器 */
overflow: hidden;
}
.fixed-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="fixed-container">
<video autoplay muted loop playsinline>
<source src="https://ipipp.com/video/sample.mp4" type="video/mp4">
</video>
</div>
响应式容器铺满
如果是响应式的容器，比如宽度随屏幕变化，高度按比例自适应，可以通过padding-top技巧设置容器高度，再让video绝对定位铺满：
<style>
.responsive-container {
width: 100%;
/* 16:9比例的容器，padding-top为9/16*100%=56.25% */
padding-top: 56.25%;
position: relative;
}
.responsive-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="responsive-container">
<video autoplay muted loop playsinline>
<source src="https://ipipp.com/video/sample.mp4" type="video/mp4">
</video>
</div>
常见问题说明
- 如果设置后视频没有铺满，优先检查容器是否有明确的height值，百分比高度需要父元素有固定高度作为参考。
- 移动端需要给video添加
playsinline</code>属性，避免视频自动全屏播放。 - 自动播放的视频需要添加
muted</code>属性，否则大部分浏览器会禁止自动播放。
html5_videowidth_100%height_100%视频铺满容器修改时间：2026-07-23 07:51:13