如何使React Player填满指定div容器？

问题说明 #

需要让ReactPlayer完全适配box_dicover_camera容器，实现视频像图片一样填满容器的效果，当前视频无法达到该效果。

原代码 #

Top.js #

{camera.map((item,i) => 
  <div key={i} className="discover_device col-4">
    <div className="box_dicover_camera">
    <Link className="box_dicover_camera_link" to={`/camera_detail_condo/${item.entity_id}`}>

    <ReactPlayer
      className="camera_video_discover"
      url={'xxx.com'}
      controls={false}
      playing
      muted
      config={{
        file: {
          hlsOptions: {
            xhrSetup: (xhr) => {
              xhr.setRequestHeader('Authorization', `Bearer ${cookies.get('accesstoken')}`);
            },
          },
        },
      }} />
    </Link>
    <div className="discover_item_room_name_entity_id">
      <p className="discover_item_room_name_carmera">{item.room_name}</p>
      <p className="discover_item_entity_id_camera">{item.entity_id}</p>
    </div>
</div>

App.css #

.box_dicover_camera {
  position: relative;
  background:#1E3E75; 
  padding:15px;
  border-radius: 10px;
  margin-bottom: 30px;
  width: 340px;
  height: 300px;
}

.box_dicover_camera .camera_video_discover {
  object-fit: cover !important;
  position: absolute !important;
}

.camera_video_discover video {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
}

修改后的代码 #

Top.js #

给ReactPlayer添加宽高100%的属性，覆盖组件默认尺寸：

{camera.map((item,i) => 
  <div key={i} className="discover_device col-4">
    <div className="box_dicover_camera">
    <Link className="box_dicover_camera_link" to={`/camera_detail_condo/${item.entity_id}`}>

    <ReactPlayer
      className="camera_video_discover"
      url={'xxx.com'}
      controls={false}
      playing
      muted
      width="100%"
      height="100%"
      config={{
        file: {
          hlsOptions: {
            xhrSetup: (xhr) => {
              xhr.setRequestHeader('Authorization', `Bearer ${cookies.get('accesstoken')}`);
            },
          },
        },
      }} />
    </Link>
    <div className="discover_item_room_name_entity_id">
      <p className="discover_item_room_name_carmera">{item.room_name}</p>
      <p className="discover_item_entity_id_camera">{item.entity_id}</p>
    </div>
</div>

App.css #

调整样式让视频精准填充容器，并适配圆角：

.box_dicover_camera {
  position: relative;
  background:#1E3E75; 
  padding:15px;
  border-radius: 10px;
  margin-bottom: 30px;
  width: 340px;
  height: 300px;
  overflow: hidden; /* 防止视频超出容器圆角 */
}

.box_dicover_camera .camera_video_discover {
  position: absolute !important;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  width: calc(100% - 30px) !important;
  height: calc(100% - 30px) !important;
}

.camera_video_discover video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 保持比例填充，裁剪超出部分 */
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  border-radius: inherit; /* 继承容器圆角 */
}

关键修改点 #

• 给ReactPlayer设置width="100%"和height="100%"，打破组件默认尺寸限制
• 调整绝对定位参数，让视频刚好填满容器的padding内部区域
• 用object-fit: cover保证视频按比例填充，避免拉伸变形
• 添加圆角适配和溢出隐藏，让视频风格和容器统一

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