使用video-react库设置视频宽高不生效的问题求助

核心原因 #

• 库默认样式给.video-react根节点设置了width:100%的流体规则，同时流体模式下靠padding-top撑比例，就算设置fluid={false}，部分旧版本不会自动清除这个内边距
• 宽高属性传入带px的字符串时，部分版本解析逻辑异常，不会正确写入内联样式
• 自定义类名的样式优先级低于库默认引入的CSS规则，设置被覆盖

修复步骤 #

1. 调整组件Props传参，宽高直接传数值类型，保留fluid={false}配置，代码参考：

<Player 
  fluid={false} 
  width={330} 
  height={500} 
  id="videoplayer" 
  className="react-player" 
  autoPlay 
  loop 
  muted 
  ref={player => {
    this.player = player;
  }} 
  videoId="video-1"
>
  <source src={this.state.playerSource} />       
</Player>

2. 新增样式覆盖库默认规则，注意如果是CSS Module或者scoped样式需要用:deep()穿透，全局样式直接写即可：

/* 清除默认流体布局规则，强制应用自定义宽高 */
#videoplayer.video-react {
  width: 330px !important;
  height: 500px !important;
  padding-top: 0 !important;
}
/* 可选：控制视频内容适配容器的方式 */
#videoplayer .video-react-video {
  width: 100%;
  height: 100%;
  /* 保持比例留白用contain，裁剪填满容器用cover */
  object-fit: contain;
}

3. 排查父容器样式：如果播放器父元素设置了display: flex且给子元素加了flex: 1、width: 100%这类强制拉伸规则，需要同步调整，避免父容器覆盖自定义宽高。

内容的提问来源于stack exchange，提问作者Anto-oh