使用容器包裹视频并设置padding-top:56.25%可保持16:9宽高比，结合position:absolute和object-fit:cover/contain实现响应式播放器，通过媒体查询在小屏幕限制高度并改用contain避免裁剪，确保跨设备良好显示。
要实现一个响应式的视频播放器，关键在于让视频容器能根据屏幕尺寸自动调整宽高，同时保持正确的宽高比。通过CSS可以轻松实现这一效果，无需JavaScript。
使用容器包裹视频并设置宽高比
为了让视频在不同设备上都能良好显示，推荐用一个容器包裹标签，并利用CSS的padding-top技巧来维持宽高比。
常见的视频宽高比是16:9，也可以根据需要选择4:3或其他比例。
示例代码：
立即学习“前端免费学习笔记（深入）”；
控制视频填充方式
object-fit属性决定视频内容如何适应容器：
- cover：保持宽高比的同时填满容器，可能裁剪部分画面
- contain：完整显示视频，保留黑边以适应容器
- fill：拉伸视频以完全填充容器（可能变形）
移动端通常推荐contain，避免重要内容被裁剪。
适配小屏幕优化体验
在手机上，建议限制最大宽度、调整控件大小，提升可操作性。
可以添加以下CSS增强响应性：
@media (max-width: 768px) {
.video-container {
padding-top: 56.25%;
max-height: 250px;
}
.video-container video {
object-fit: contain;
}
}
基本上就这些。通过容器+绝对定位+宽高比控制，就能让视频播放器在任何设备上自适应显示，关键是保持比例不变形，用户体验更自然。
