在移动端通过css控制响应式视频播放器的固定纵横比，核心做法是结合 aspect-ratio 属性与 max-width: 100%。将容器设为相对定位，内部视频元素绝对铺满并限制最大宽度为100%，同时利用 aspect-ratio 锁定比例（如 16/9），这样视频既能随屏幕宽度缩放，又不会变形或溢出。
如何确保视频在不同屏幕宽度下保持比例不拉伸
要实现这一效果，需使用现代 CSS 的 aspect-ratio 属性直接定义容器的宽高比，并通过 object-fit: contain 或 cover 控制视频填充方式。配合 width: 100% 让容器自适应父级宽度，即可保证在任何移动设备上比例恒定且布局稳定。
<div class="video-container">
<video src="movie.mp4" controls></video>
</div>
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
background: #000;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: contain;
}
上述代码中，.video-container 设置了 aspect-ratio: 16 / 9，无论屏幕多宽，高度自动按 16:9 计算。video 元素填满容器，object-fit: contain 确保视频完整显示而不裁剪。若希望填满无黑边，可改为 cover。此方案兼容所有支持 aspect-ratio 的现代浏览器，包括 iOS Safari 和 Android Chrome。
如何处理旧版浏览器不支持 aspect-ratio 的回退方案
对于不支持 aspect-ratio 的旧版浏览器，可采用经典的“padding-top”技巧实现相同效果。该方法利用伪元素或子元素的 padding-top 百分比基于父级宽度计算，从而间接控制高度，达到固定纵横比的目的。
<div class="video-wrapper">
<iframe src="https://player.vimeo.com/video/..."></iframe>
</div>
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 = 9/16 * 100% */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
该方案中，.video-wrapper 的 padding-top: 56.25% 表示高度为宽度的 56.25%，即 16:9 比例。由于 padding 百分比基于父级宽度，因此能动态适应屏幕变化。内部 iframe 绝对定位填满容器。此方法兼容性极佳，适用于 IE11 及更早版本。注意：若使用 video 标签而非 iframe，结构类似，只需替换内容即可。
当视频源为不同分辨率时，object-fit 对最终显示的影响是什么
当视频源分辨率与容器比例不一致时，object-fit 属性决定视频如何适配容器。若设为 contain，视频完整显示，可能留黑边；若设为 cover，视频填满容器，可能裁剪边缘。选择取决于是否允许裁剪内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
