方法一：使用 object-fit 属性
这是最简单且推荐的方法，通过 CSS 的 object-fit 属性，可以控制视频在容器内的填充方式，从而实现自适应。
HTML 代码：
CSS 代码：
.video-container {
width: 100%; /* 容器宽度占满父元素 */
height: auto; /* 容器高度根据视频比例自适应 */
}
.video-container video {
width: 100%;
height: 100%;
object-fit: contain; /* 视频保持比例，完整显示在容器内 */
}
object-fit 属性的常用值：
- contain：保持视频原有宽高比，完整显示在容器内，可能会出现留白。
- cover：保持视频原有宽高比，缩放视频以覆盖整个容器，可能会裁剪视频。
- fill：拉伸或压缩视频以填充整个容器，可能导致视频变形。
- none：视频保持原始尺寸，不进行缩放或裁剪。
- scale-down：如果视频尺寸小于容器，则按 none 处理；否则按 contain 处理。
方法二：使用 padding-bottom 实现等比例缩放
这种方法通过设置容器的 padding-bottom 值，使其高度始终保持与宽度一定的比例，从而实现视频的等比例缩放。
HTML 代码：
CSS 代码：
.video-wrapper {
width: 100%;
position: relative; /* 设置相对定位，为子元素绝对定位做准备 */
padding-bottom: 56.25%; /* 16:9 比例，可根据视频比例调整 */
height: 0;
}
.video-wrapper video {
position: absolute; /* 设置绝对定位，使其相对于父元素定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
注意事项：
- padding-bottom 的百分比值需要根据视频的宽高比来计算。例如，16:9 的视频比例，padding-bottom 值为 56.25%（9 / 16 * 100%）。
- 这种方法适用于需要保持视频宽高比的场景。
方法三：使用 JavaScript 动态计算高度
如果需要更复杂的自适应逻辑，可以使用 JavaScript 来动态计算视频容器的高度。
HTML 代码：
JavaScript 代码：
const videoContainer = document.querySelector('.video-container');
const video = videoContainer.querySelector('video');
video.addEventListener('loadedmetadata', function() {
const videoRatio = video.videoWidth / video.videoHeight;
videoContainer.style.height = videoContainer.offsetWidth / videoRatio + 'px';
});
window.addEventListener('resize', function() {
const videoRatio = video.videoWidth / video.videoHeight;
videoContainer.style.height = videoContainer.offsetWidth / videoRatio + 'px';
});
代码解释：
- loadedmetadata 事件：在视频元数据加载完成后触发，获取视频的原始宽高。
- resize 事件：在窗口大小改变时触发，重新计算视频容器的高度。
- videoRatio：视频的宽高比。
- videoContainer.offsetWidth：视频容器的宽度。