如何在CSS初级项目中实现响应式视频_container max-width与padding配合
使用max-width和padding-bottom可实现响应式视频容器，确保视频在不同设备上自动缩放并保持16:9宽高比。首先设置容器width: 100%、max-width限制最大宽度，防止溢出；再通过position: relative和padding-bottom: 56.25%（9÷16）创建自适应高度；内部iframe或video元素设为absolute填充容器，从而实现完美比例适配。
在CSS初级项目中实现响应式视频容器，关键是让视频在不同屏幕尺寸下自动缩放并保持宽高比。通过设置max-width和padding的巧妙配合，可以轻松实现这一效果。
使用 max-width 控制最大宽度
给视频容器设置max-width: 100%;能确保它不会超出父元素的边界。这样无论是在手机、平板还是桌面端，视频都不会溢出容器。
同时将width设为100%，可以让容器自适应父级宽度，而max-width则起到“上限保护”作用。
示例：
.container {width: 100%;
max-width: 800px;
margin: 0 auto;
}
用 padding-bottom 维持视频比例
为了防止视频在缩放时变形，需要保持其原始宽高比（如16:9）。这可以通过padding-bottom技巧实现。
原理是利用padding百分比基于父容器宽度计算的特性。例如，16:9的比例对应padding-bottom: 56.25%;（即9 ÷ 16 = 0.5625）。
步骤如下：
- 容器设为相对定位：
position: relative; - 设置
padding-bottom: 56.25%;（适用于16:9） - 将实际视频元素（如iframe或video）绝对定位填满容器
完整响应式容器代码示例
.video-container {position: relative;
width: 100%;
max-width: 800px;
height: 0;
padding-bottom: 56.25%; /* 16:9 比例 */
margin: 20px auto;
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
这样写后，嵌入的YouTube视频或本地标签都能自适应屏幕，并始终维持正确的显示比例。
基本上就这些。掌握max-width限制最大尺寸，再用padding-bottom锁定比例，就能在不依赖JavaScript的情况下做出稳定的响应式视频布局。不复杂但容易忽略细节。
