使用 padding-bottom 技巧和 max-width 实现响应式视频嵌入：通过设置容器 width 100%、height 0、padding-bottom 保持宽高比（如 16:9 对应 56.25%），结合绝对定位使 iframe 充满容器，再添加 max-width 限制最大尺寸并配合 margin auto 居中，支持不同比例通过类名区分，确保视频在各设备正常显示。
在网页开发中，让嵌入的视频在不同设备上都能自适应显示，是响应式设计的重要部分。单纯使用 width 和 height 固定尺寸会导致在小屏幕上溢出或布局错乱。结合 max-width 与合适的比例控制，才能实现真正灵活的响应式视频嵌入。
保持宽高比：使用 paddingBottom 技巧
由于直接设置 height 为百分比在响应式场景下不可靠，常用技巧是利用 padding-bottom 保持视频容器的宽高比（如 16:9）。
示例代码：
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 宽高比 */
}
<p>.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}</p>结合 max-width 控制最大尺寸
即使使用了百分比宽度，也建议为容器设置 max-width，防止在大屏幕上视频过度拉伸影响观看体验。
立即学习“前端免费学习笔记（深入）”；
- max-width 可设为固定值（如 800px）或相对单位（如 100vw）
- 配合 margin: auto 实现居中布局
- 确保在各种屏幕下既不会太小也不会超出合理范围
增强版样式示例：
.video-container {
position: relative;
width: 100%;
max-width: 800px;
height: 0;
padding-bottom: 56.25%;
margin: 20px auto;
}
适配多种视频比例
不同平台的视频可能有不同的宽高比，比如 4:3、21:9 等。可以通过添加不同的类来区分处理。
例如：
.video-4x3 {
padding-bottom: 75%; /* 4:3 */
}
<p>.video-21x9 {
padding-bottom: 42.857%; /<em> 21:9 </em>/
}</p>HTML 中根据视频类型选择对应类即可：
<div class="video-container video-4x3"> <iframe src="..."></iframe> </div>
基本上就这些。关键在于用容器控制比例，用 max-width 限制扩展，再通过绝对定位让内容贴合容器。不复杂但容易忽略细节。
