如何基于屏幕宽高及缩放调整React项目中HTML Video标签尺寸？

问题背景 #

你在React+TypeScript+Tailwind项目中用HTML Video标签实现了视频组件，之前通过给容器添加大量媒体查询动态设置左右内边距来调整视频尺寸，但这种方式需要维护多组适配规则，通用性差。希望参考YouTube的实现逻辑，基于屏幕宽高及缩放动态调整视频尺寸。

核心思路（对齐YouTube逻辑） #

YouTube的视频适配核心是优先保持视频原始宽高比，同时根据屏幕可用空间（宽度、剩余垂直高度）动态调整视频大小，避免拉伸变形或超出视口。具体可分为3步：

• 锁定视频宽高比，防止拉伸
• 自适应可用宽度，限制最大宽度避免视频过宽
• 动态计算垂直可用空间，确保视频不挤压下方元素（可选）

实现代码 #

1. 修改VideoComponent.tsx（核心适配逻辑）

import { useRef, useEffect } from 'react';

const VideoComponent = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // 监听窗口resize，动态调整视频最大高度
  useEffect(() => {
    const adjustVideoMaxHeight = () => {
      if (!containerRef.current) return;
      // 计算垂直可用空间：视口高度减去下方菜单、按钮的总高度（请根据实际布局调整数值）
      const availableVerticalSpace = window.innerHeight - 150;
      // 计算当前宽度下，16:9比例的视频高度
      const ratioBasedHeight = (containerRef.current.offsetWidth * 9) / 16;
      // 取两者较小值作为容器最大高度，避免视频超出视口
      containerRef.current.style.maxHeight = `${Math.min(availableVerticalSpace, ratioBasedHeight)}px`;
    };

    adjustVideoMaxHeight();
    window.addEventListener('resize', adjustVideoMaxHeight);
    return () => window.removeEventListener('resize', adjustVideoMaxHeight);
  }, []);

  return (
    <div 
      ref={containerRef}
      className="relative w-full max-w-[600px] mx-auto"
      style={{ aspectRatio: '16/9' }} {/* 现代浏览器直接用aspect-ratio锁定比例 */}
    >
      <video
        ref={videoRef}
        className="absolute top-0 left-0 w-full h-full object-contain"
        src="your-video-source.mp4"
        controls
      />
    </div>
  );
};

export default VideoComponent;

2. 优化FirstPageContent.tsx（简化布局）

import VideoComponent from './VideoComponent';
import DropdownComponents from './DropdownComponents';
import Buttons from './Buttons';

const FirstPageContent = () => {
  return (
    <div className="container m-auto flex h-full max-w-[1200px] flex-col p-4">
      {/* 视频容器居中，底部留间距 */}
      <div className="flex justify-center mb-4">
        <VideoComponent />
      </div>

      <div className="flex flex-wrap gap-4 mb-4">
        <DropdownComponents />
      </div>

      <div className="flex flex-wrap gap-2">
        <Buttons />
      </div>
    </div>
  );
};

export default FirstPageContent;

3. 旧浏览器兼容方案（可选）

如果需要兼容不支持aspect-ratio的旧浏览器，替换视频容器的写法：

<div 
  ref={containerRef}
  className="relative w-full max-w-[600px] mx-auto"
>
  {/* 用padding-top实现16:9比例：9/16=56.25% */}
  <div className="pt-[56.25%]"></div>
  <video
    ref={videoRef}
    className="absolute top-0 left-0 w-full h-full object-contain"
    src="your-video-source.mp4"
    controls
  />
</div>

关键说明 #

• 宽高比锁定：用aspect-ratio（或旧浏览器的padding-top技巧）确保视频始终保持设定比例，不会拉伸变形。
• object-contain：视频会在容器内完整显示，不会被裁剪，同时保持比例。
• 动态高度控制：通过JS计算可用垂直空间，避免视频下方的菜单、按钮被挤出视口，和YouTube小屏幕表现一致。
• 简化适配规则：用Tailwind的通用内边距p-4和最大宽度类替代大量媒体查询，适配逻辑更简洁通用。

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