使用CSS媒体查询与弹性布局可实现响应式视频播放器。1. 用div包裹iframe或video标签构建基础结构；2. 设置video-container的padding-top百分比（如16:9对应56.25%）保持宽高比；3. 子元素绝对定位填满容器，确保自适应缩放；4. 通过@media调整不同屏幕下的比例与间距，如手机端改用60%或75% padding-top适配竖屏；5. 结合max-width、margin:auto和Flex布局居中并优化视觉效果；6. 视频标签设width:100%、height:auto防变形。关键在于比例容器与断点适配，避免溢出或失真，测试多设备确保兼容性。
要实现一个响应式
视频播放器
，关键是让视频容器在不同屏幕尺寸下自动调整宽高比并保持布局美观。通过CSS的媒体查询（
@media
）与
弹性布局
（如Flexbox或百分比宽度），可以轻松达成这一目标。
1. 基础HTML结构
使用
2. 使用“固有比例”容器（推荐方法）
利用
padding-top
百分比实现等比缩放，比如16:9的比例：
包裹
.video-container {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 16:9 = 9/16 = 0.5625 */
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.video-container {
padding-top: 60%; /* 稍微调整比例以适应手机竖屏 */
margin: 10px 0;
}
}
@media (max-width: 480px) {
.video-container {
padding-top: 75%; / 4:3 比例更适合某些老视频 /
}
}
.video-container {
max-width: 800px;
margin: 0 auto; /* 居中显示 */
}