使用内嵌容器与padding-bottom技巧或aspect-ratio属性可实现响应式视频播放器，通过相对定位与绝对定位使视频按16:9比例自适应缩放，结合max-width和媒体查询适配不同设备，确保在手机和桌面端均不溢出或变形。
在CSS中制作响应式视频播放器的关键是让视频容器能够根据屏幕尺寸自动调整比例，同时保持正确的宽高比。下面介绍几种实用方法。
使用内嵌容器与 padding-top 技巧
这是最常用且兼容性好的方式，通过利用 padding-bottom 或 padding-top 实现等比缩放。
示例代码：
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 宽高比 */
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
这样无论在手机还是桌面端，视频都会按比例缩放，不会变形或溢出。
立即学习“前端免费学习笔记（深入）”；
使用 aspect-ratio 属性（现代浏览器推荐）
现代浏览器支持 aspect-ratio 属性，可以更简洁地控制宽高比。
- 直接设置容器的 aspect-ratio 为 16 / 9
- 配合 max-width: 100% 确保响应式
CSS 示例：
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; / 可选：裁剪以填满 /
}
这种方法代码更少，逻辑更直观，适合不需要支持老旧浏览器的项目。
适配不同设备的小技巧
- 对移动端可适当限制最大高度，避免视频过大
- 使用 max-width: 100% 防止横向溢出
- 结合媒体查询微调特定屏幕下的表现
例如：
@media (max-width: 768px) {
.video-container {
padding-bottom: 50%; /* 手机上稍紧凑一些 */
}
}
基本上就这些。核心是保持比例不变的前提下自适应宽度，选择合适的方法即可实现流畅的观看体验。
