如何让可变尺寸视频的内部容器自适应屏幕？解决竖屏溢出问题

问题描述 #

我用React组件搭配Sass实现视频播放，采用了宽高比盒子（aspect ratio box）布局，但播放竖屏视频（比如1080x1920）时，视频宽度适配屏幕100%后高度会溢出，还出现滚动条。想问怎么实现响应式适配屏幕？是不是要给横竖屏不同类型的视频单独写CSS，有没有更巧妙的解决办法？

现有代码 #

React组件代码

const Player = require('react-player');

<div className="video-container">
  {activeVideo !== null && (
     <div className="player-aspect-ratio-box">
       <Player
         className="player"
         width="100%"
         height="100%"
         url={videos[activeVideo].url}
         playing={true}
         controls
         onEnded={() => setModalIsOpen(false)}
         onError={() => setModalIsOpen(false)}
       />
     </div>
   )}
</div>

Sass代码

.video-container {
  position: absolute;
  background: rgba(60,60,60, 0.5);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.player-aspect-ratio-box {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (9/16)*100%;
  }
  .player {
    position: absolute;
    top: 0;
    left: 0;
  }
}

问题根源 #

当前的宽高比盒子硬编码了16:9的比例（padding-top: (9/16)*100%），不管视频本身是横屏还是竖屏，容器都固定是这个比例。竖屏视频的比例是9:16，当视频宽度占满16:9的容器时，高度必然超出容器范围，导致溢出和滚动条。

解决方法 #

方法1：动态设置容器宽高比（精准适配任何视频比例）

通过React Player的onReady回调获取视频真实宽高，计算比例后动态给容器设置padding-top，适配所有比例的视频：

修改后的React组件：

import { useState } from 'react';
const Player = require('react-player');

// 初始化默认比例为16:9
const [videoAspectRatio, setVideoAspectRatio] = useState((9/16)*100);

<div className="video-container">
  {activeVideo !== null && (
     <div 
       className="player-aspect-ratio-box"
       style={{ '--aspect-ratio': `${videoAspectRatio}%` }}
     >
       <Player
         className="player"
         width="100%"
         height="100%"
         url={videos[activeVideo].url}
         playing={true}
         controls
         onReady={(e) => {
           // 获取视频原生宽高，计算比例
           const { videoWidth, videoHeight } = e.player;
           const ratio = (videoHeight / videoWidth) * 100;
           setVideoAspectRatio(ratio);
         }}
         onEnded={() => setModalIsOpen(false)}
         onError={() => setModalIsOpen(false)}
       />
     </div>
   )}
</div>

修改后的Sass代码：

.video-container {
  position: absolute;
  background: rgba(60,60,60, 0.5);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  // 让视频盒子居中显示，避免溢出时看不到内容
  display: flex;
  justify-content: center;
  align-items: center;

  .player-aspect-ratio-box {
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
    width: 100%;

    &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: var(--aspect-ratio); // 使用动态传入的比例
    }

    .player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
    }
  }
}

方法2：用object-fit让视频自适应容器（简单快捷）

如果不需要容器严格匹配视频比例，只需要视频完整显示不溢出，直接给视频设置object-fit: contain，同时限制容器最大尺寸：

修改后的Sass代码：

.video-container {
  position: absolute;
  background: rgba(60,60,60, 0.5);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .player-aspect-ratio-box {
    width: 100%;
    max-width: 90vw;
    max-height: 90vh;
    min-height: 300px;
    
    .player {
      width: 100%;
      height: 100%;
      object-fit: contain; // 保持视频比例，完整显示在容器内
    }
  }
}

这种方法无需修改React组件，仅通过CSS即可解决溢出问题，视频会自动在容器内居中显示。

方法3：固定比例适配（适合已知视频比例场景）

如果视频只有横屏（16:9）和竖屏（9:16）两种固定比例，可以给容器添加不同类名区分：

React组件修改：

<div className={`player-aspect-ratio-box ${videos[activeVideo].isPortrait ? 'portrait' : ''}`}>

Sass代码修改：

.player-aspect-ratio-box {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (9/16)*100%; // 默认横屏比例
  }
  &.portrait:before {
    padding-top: (16/9)*100%; // 竖屏比例
  }
  .player {
    position: absolute;
    top: 0;
    left: 0;
  }
}

此方法仅适用于视频比例固定的场景，灵活性较低。

总结 #

• 需精准适配任何视频比例：优先用方法1动态设置比例；
• 追求简单快捷、仅需解决溢出问题：用方法2的object-fit；
• 视频比例固定：可考虑方法3。

内容的提问来源于stack exchange，提问作者Gražvydas Untulis