使用 padding-bottom 技巧和 max-width 实现响应式视频嵌入：通过设置容器 width 100%、height 0、padding-bottom 保持宽高比（如 16:9 对应 56.25%），结合绝对定位使 iframe 充满容器，再添加 max-width 限制最大尺寸并配合 margin auto 居中，支持不同比例通过类名区分，确保视频在各设备正常显示。
在网页开发中，让嵌入的视频在不同设备上都能自适应显示，是响应式设计的重要部分。单纯使用 width 和 height 固定尺寸会导致在小屏幕上溢出或布局错乱。结合 max-width 与合适的比例控制，才能实现真正灵活的响应式视频嵌入。
由于直接设置 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，防止在大屏幕上视频过度拉伸影响观看体验。
立即学习“前端免费学习笔记（深入）”；
增强版样式示例：
.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 限制扩展，再通过绝对定位让内容贴合容器。不复杂但容易忽略细节。
以上就是CSS响应式视频嵌入布局_width height与max-width结合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
531
收藏
