React-Player嵌入YouTube视频仅播放器尺寸变更、视频内容无法缩放问题

问题根源 #

你当前的配置仅将播放器容器的宽高设为100%，但没有为容器指定固定的宽高比，YouTube视频默认是16:9的比例，因此内部视频无法适配拉伸后的容器，出现尺寸不匹配的问题。

ReactPlayer 解决方案 #

第一步：添加容器样式 #

给播放器外层包裹一个16:9比例的容器，和YouTube官网的播放器比例保持一致：

/* 兼容现代浏览器的写法 */
.trailer-container {
  width: 100%;
  max-width: 1280px; /* 匹配YouTube桌面端默认最大视频宽度，可自定义 */
  aspect-ratio: 16 / 9;
  margin: 0 auto; /* 居中展示 */
}

.trailer-player {
  width: 100%;
  height: 100%;
}

/* 兼容不支持aspect-ratio的旧浏览器写法，二选一即可 */
/*
.trailer-container {
  width: 100%;
  max-width: 1280px;
  position: relative;
  padding-top: 56.25%;
  margin: 0 auto;
}
.trailer-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/

第二步：调整组件代码 #

外层加容器，同时补充YouTube播放器的适配配置：

<div className="trailer-container">
  <ReactPlayer 
    className="trailer-player"
    url="https://www.youtube.com/watch?v=BIhNsAtPbPI&ab_channel=JamesBond007" 
    id='player'
    muted={mute}
    playing
    loop
    width="100%"
    height="100%"
    config={{
      youtube: {
        playerVars: {
          rel: 0, // 关闭播放结束后推荐无关视频
          modestbranding: 1 // 隐藏YouTube logo
        }
      }
    }}
  />
</div>

原生iframe实现方案 #

直接使用YouTube官方嵌入逻辑，效果和官网完全一致：

.trailer-container {
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}
.trailer-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

对应的HTML/JSX代码：

<div class="trailer-container">
  <iframe 
    src="https://www.youtube.com/embed/BIhNsAtPbPI?autoplay=1&mute=1&loop=1&playlist=BIhNsAtPbPI" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

参数说明：autoplay=1开启自动播放，mute=1开启静音，loop=1配合playlist=视频ID实现循环播放。

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