使用内嵌容器与padding-bottom技巧或aspect-ratio属性可实现响应式视频播放器，通过相对定位与绝对定位使视频按16:9比例自适应缩放，结合max-width和媒体查询适配不同设备，确保在手机和桌面端均不溢出或变形。
在CSS中制作响应式视频播放器的关键是让视频容器能够根据屏幕尺寸自动调整比例，同时保持正确的宽高比。下面介绍几种实用方法。
这是最常用且兼容性好的方式，通过利用 padding-bottom 或 padding-top 实现等比缩放。
示例代码：
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 宽高比 */
}
<p>.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}</p>这样无论在手机还是桌面端，视频都会按比例缩放，不会变形或溢出。
立即学习“前端免费学习笔记（深入）”；
现代浏览器支持 aspect-ratio 属性，可以更简洁地控制宽高比。
CSS 示例：
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
<p>.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /<em> 可选：裁剪以填满 </em>/
}</p>这种方法代码更少，逻辑更直观，适合不需要支持老旧浏览器的项目。
例如：
@media (max-width: 768px) {
.video-container {
padding-bottom: 50%; /* 手机上稍紧凑一些 */
}
}
基本上就这些。核心是保持比例不变的前提下自适应宽度，选择合适的方法即可实现流畅的观看体验。
potplayer是一款功能全面的视频播放器，支持各种格式的音频文件，内置了非常强大的解码器功能，能够非常流畅的观看，有需要的小伙伴快来保存下载体验吧！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
832
收藏
