实现响应式视频播放器的关键是保持宽高比，首先使用max-width: 100%和height: auto确保视频不溢出；接着推荐用容器通过padding-bottom: 56.25%（16:9比例）创建自适应空间，结合绝对定位使视频始终填满容器且不变形，最后可添加背景图提升加载体验。
要实现一个响应式视频播放器并保持正确的宽高比，关键是让视频容器随屏幕尺寸缩放，同时不破坏原始比例。使用 max-width: 100% 和 height: auto 是最基础且有效的方法。
1. 基础HTML结构
视频通常通过 标签嵌入页面。确保设置 controls 属性以显示播放控制条。
2. 使用 max-width 和 height: auto
为 元素设置最大宽度为父容器的100%，并让高度自动调整，可防止溢出并维持比例。
.video-container video {
max-width: 100%;
height: auto;
}
这样无论屏幕多小，视频都不会超出容器，同时保持原始宽高比。
立即学习“前端免费学习笔记（深入）”；
3. 使用容器包裹保持比例（推荐）
更稳健的做法是用一个容器来锁定宽高比，比如 16:9。利用 padding-bottom 技巧创建自适应空间。
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; / 16:9 宽高比 (9 ÷ 16 = 0.5625)
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
这种方法确保视频在任何设备上都按比例显示，避免拉伸或留白。
4. 可选：添加背景图或占位符
在视频加载前，可通过设置容器背景提供视觉提示。
.video-container {
background: url('placeholder.jpg') no-repeat center center;
background-size: cover;
}
基本上就这些。通过合理使用 max-width: 100%、height: auto 和等比容器，就能轻松实现一个适配所有设备的响应式视频播放器。不复杂但容易忽略细节。
