在网页里插入视频，本质上靠的是HTML5提供的video标签，CSS负责的是这个视频的尺寸、位置、遮罩、圆角等外观层面的控制。很多人以为插视频是CSS的活，其实CSS只管装饰，真正把视频文件加载进页面的动作由video标签完成。理解了这一点，后面遇到视频不显示、比例变形、自动播放失败这些问题时，就知道该往哪个方向排查了。
基础嵌入方法与video标签常用属性
插入视频的最小可用代码非常简单，只需要一个video标签并给它指定视频源即可。source标签允许同时提供多种格式的视频文件，浏览器会按顺序选择自己支持的第一个格式，这是保证兼容性的常见做法。MP4配合H.264编码基本覆盖了所有主流浏览器，一般作为第一个选项。
<video controls width="640" height="360" poster="cover.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> 您的浏览器不支持 video 标签 </video>
video标签有几个关键属性需要掌握。controls属性让浏览器显示自带的播放控制栏；poster属性设置视频加载前显示的封面图，能显著提升页面观感；preload属性控制预加载策略，设为none可以节省流量，设为metadata只加载时长和尺寸等元信息。autoplay和muted通常需要一起使用，因为现代浏览器出于用户体验考虑，禁止带声音的自动播放，必须静音后才允许自动播放，这一点在Chrome和Safari上尤其严格。
<!-- 静音自动播放并循环的常见配置 --> <video autoplay muted loop playsinline> <source src="bg-video.mp4" type="video/mp4"> </video>
另外要注意playsinline属性，在iOS的Safari上如果不加这个属性，视频播放时会强制全屏，导致页面内嵌效果完全失效。做移动端适配时这个属性几乎是必写的。
用CSS控制视频尺寸与宽高比
视频插入后最常见的排版问题就是比例变形。video元素虽然本身有width和height属性，但实际项目中更推荐用CSS来控制尺寸，因为CSS能配合响应式布局灵活调整。最基础的写法是让宽度占满容器、高度自动计算：
video {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}这段代码里display设置为block是为了消除video元素底部默认的空隙，这和img标签的处理方式一样，都是行内替换元素基线对齐导致的经典小坑。border-radius则可以直接给视频加圆角，不需要对视频文件本身做任何处理。
如果需要视频严格按照16比9的比例显示，同时又限制最大高度，可以借助aspect-ratio属性，这是现代CSS中处理宽高比最优雅的方案：
.video-box {
aspect-ratio: 16 / 9;
width: 100%;
max-width: 960px;
margin: 0 auto;
overflow: hidden;
}
.video-box video {
width: 100%;
height: 100%;
object-fit: cover;
}这里出现了关键角色object-fit。当容器的宽高比和视频本身的宽高比不一致时，默认行为是拉伸变形，而object-fit设为cover会让视频等比例缩放并裁剪多余部分，填满整个容器；设为contain则会完整显示视频内容，但可能留下黑边。做全屏背景视频时，cover配合position为fixed的容器是标准搭配。
自定义播放控制栏与交互样式
浏览器自带的控制栏在不同平台长相差异很大，而且无法用CSS直接修改其内部样式。如果设计稿对控制栏有明确要求，通常的做法是去掉controls属性，自己用HTML和CSS搭建一套控制界面，再通过JavaScript调用video元素提供的API来实现播放、暂停、进度条和音量控制。
<div class="player"> <video id="myVideo" src="movie.mp4"></video> <button id="playBtn">播放</button> </div>
.player {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.player video {
width: 100%;
height: 100%;
object-fit: cover;
}
#playBtn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 10px 28px;
border: none;
border-radius: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
cursor: pointer;
}对应的JavaScript逻辑只需几行。给按钮绑定点击事件，判断video元素的paused状态，然后调用play或pause方法即可。video元素还提供timeupdate事件用于更新进度条，volume属性用于调节音量，这些API组合起来足以实现一个功能完整的自定义播放器。
const video = document.getElementById('myVideo');
const btn = document.getElementById('playBtn');
btn.addEventListener('click', () => {
if (video.paused) {
video.play();
btn.textContent = '暂停';
} else {
video.pause();
btn.textContent = '播放';
}
});还有一类常见需求是在视频上叠加文字或渐变遮罩，让封面更有设计感。做法是把视频容器设为position为relative，遮罩层和文字用absolute定位覆盖在视频上方，配合z-index控制层级。遮罩可以用linear-gradient做出底部压暗的效果，保证白色标题文字在亮色视频画面上依然清晰可读。
.video-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 50%);
display: flex;
align-items: flex-end;
padding: 24px;
color: #fff;
pointer-events: none;
}注意遮罩层要加pointer-events为none，否则它会挡住视频的点击事件，导致用户无法通过原生控制栏操作播放。如果整页都用的是自定义控制栏就不存在这个问题，但混合使用时这个细节很容易被忽略。
总结一下，插视频的核心是video标签加source多格式源，CSS层面重点掌握宽高比控制、object-fit的裁剪策略和覆盖层的定位技巧，遇到自动播放问题先检查是否静音，移动端别忘了playsinline。把这几块拼起来，绝大多数网页视频场景都能应对自如。