如何让React Player组件完全适配容器并消除左右边距？

针对你遇到的视频与容器边缘存在边距的问题，可通过以下两种方式解决：

1. 直接修改组件样式与填充模式 #

ReactPlayer内部容器默认带少量内边距，且默认的contain填充模式会保留视频比例，当容器与视频比例不符时出现空白边距。直接调整组件参数即可：

const playerComponent = (
  <div className="h-64 sm:h-96 bg-blue-300 rounded-lg overflow-hidden">
    <ReactPlayer
      className="w-full h-full p-0 m-0"
      height="100%"
      width="100%"
      playing={true}
      controls
      url={currentMediaURL}
      fitMode="fill" // 拉伸视频填充容器，也可换成"cover"保持比例并裁剪多余部分
    />
  </div>
);

2. 自定义CSS覆盖默认样式 #

如果Tailwind样式不生效，可添加全局CSS强制清除边距并控制视频填充：

.react-player {
  padding: 0 !important;
  margin: 0 !important;
}

/* 可选：根据需求设置视频填充方式 */
.react-player video {
  object-fit: fill; /* 或cover */
}

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