使用容器包裹视频并设置padding-top:56.25%可保持16:9宽高比，结合position:absolute和object-fit:cover/contain实现响应式播放器，通过媒体查询在小屏幕限制高度并改用contain避免裁剪，确保跨设备良好显示。
要实现一个响应式的视频播放器，关键在于让视频容器能根据屏幕尺寸自动调整宽高，同时保持正确的宽高比。通过CSS可以轻松实现这一效果，无需JavaScript。
为了让视频在不同设备上都能良好显示，推荐用一个容器包裹<video>标签，并利用CSS的padding-top技巧来维持宽高比。
常见的视频宽高比是16:9，也可以根据需要选择4:3或其他比例。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<div class="video-container"><video controls><source src="your-video.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video></div>object-fit属性决定视频内容如何适应容器：
移动端通常推荐contain，避免重要内容被裁剪。
在手机上，建议限制最大宽度、调整控件大小，提升可操作性。
可以添加以下CSS增强响应性：
@media (max-width: 768px) {
.video-container {
padding-top: 56.25%;
max-height: 250px;
}
.video-container video {
object-fit: contain;
}
}
基本上就这些。通过容器+绝对定位+宽高比控制，就能让视频播放器在任何设备上自适应显示，关键是保持比例不变形，用户体验更自然。
potplayer是一款功能全面的视频播放器，支持各种格式的音频文件，内置了非常强大的解码器功能，能够非常流畅的观看，有需要的小伙伴快来保存下载体验吧！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
199
收藏
