如何调整HTML视频尺寸以在全屏幕尺寸下保持一致宽高比

我来帮你搞定这个视频宽高比适配的问题！不管是想纯CSS实现还是用JS动态调整，都有靠谱的方案～

一、纯CSS方案（推荐，无需JS） #

这是最简单高效的实现方式，现代浏览器原生支持aspect-ratio属性，能直接固定容器的宽高比，完全不用写JS逻辑：

代码示例（现代浏览器）： #

.video-container {
  width: 100%; /* 容器占满父元素宽度 */
  max-width: 1200px; /* 可选：限制最大宽度，避免视频在超大屏幕上拉伸过度 */
  aspect-ratio: 16/9; /* 设置你需要的宽高比，比如16:9、4:3等 */
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选：保持视频内容比例，裁切超出部分；用contain则会留空白但显示完整画面 */
}

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding-top百分比法（百分比基于父元素宽度计算，是行业内的经典兼容方案）：

.video-container {
  width: 100%;
  max-width: 1200px;
  position: relative;
}

/* 16:9比例对应 padding-top: 56.25% (9÷16×100)，其他比例自行换算 */
.video-container::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

二、JavaScript方案（适合动态调整场景） #

如果你的业务需要更灵活的控制（比如根据不同屏幕条件切换宽高比），可以按你提到的思路实现，这里给你补全可运行的代码：

步骤说明： #

1. 先获取所有视频元素，保存它们的原始宽高比
2. 监听窗口resize事件，计算当前容器的可用空间，按比例调整视频尺寸
3. 加入防抖函数，避免resize事件频繁触发导致性能卡顿

代码示例： #

// 保存所有视频的原始宽高比
const videos = Array.from(document.querySelectorAll('video'));
const videoRatios = [];

// 等待视频元数据加载完成后再获取宽高比（避免初始值为0）
videos.forEach(video => {
  if (video.videoWidth && video.videoHeight) {
    videoRatios.push(video.videoWidth / video.videoHeight);
  } else {
    video.addEventListener('loadedmetadata', () => {
      videoRatios.push(video.videoWidth / video.videoHeight);
      // 加载完成后立刻调整一次
      resizeVideos();
    });
  }
});

// 防抖函数：减少resize事件触发频率，优化性能
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 核心调整函数：按比例适配容器尺寸
function resizeVideos() {
  videos.forEach((video, index) => {
    const ratio = videoRatios[index];
    if (!ratio) return; // 跳过还没加载完成的视频

    const container = video.parentElement;
    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight;

    let videoWidth, videoHeight;
    if (containerWidth / containerHeight > ratio) {
      // 容器比视频宽，按容器高度适配
      videoHeight = containerHeight;
      videoWidth = videoHeight * ratio;
    } else {
      // 容器比视频高，按容器宽度适配
      videoWidth = containerWidth;
      videoHeight = videoWidth / ratio;
    }

    // 设置视频尺寸
    video.style.width = `${videoWidth}px`;
    video.style.height = `${videoHeight}px`;
  });
}

// 初始化时调整一次，然后监听窗口resize事件
resizeVideos();
window.addEventListener('resize', debounce(resizeVideos));

注意事项： #

• 确保视频的父容器有明确的尺寸限制（比如width:100%或固定最大宽度），否则clientWidth/clientHeight可能无法正确获取
• 如果视频是动态加载的，记得在视频插入DOM后重新执行初始化逻辑

内容的提问来源于stack exchange，提问作者Chris