How to React Player fit in div box?

Question

How to React Player fit in div box? My code is like this but the React Video doesn't fit box like photo

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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;
}

I want to fit the video in box_dicover_camera. The ideal one is the following photo. The video fulfills the box_dicover_camera. (I hide the video with red square so just ignore it)

Please provide a minimum reproductible example. And please clarify what exactly you want the screen to look like. Do you want your temperature and garage box to fix in a 6 cells grid ? — Ambroise Rabier, Sep 29 '22 at 08:11

score 0 · Answer 1 · answered Sep 30 '22 at 08:42

<div className="box_dicover_camera">
  <ReactPlayer
      className="camera_video_discover"/>
</div>

.box_dicover_camera {
  border-radius: 10px;
  margin-bottom: 30px;
  width: 340px;
  height: 300px;
  background: blue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box_dicover_camera .camera_video_discover {
  width: 100%;
  height: 100%;
}

Note that if you want the video to fit the entire blue area, it will need to have a corresponding ratio (width/height being the same as 340/300 of blue square).

score 0 · Accepted Answer · answered Oct 03 '22 at 09:21

The following is correct

.camera_video_discover video {
  object-fit: cover;
  border-radius: 10px;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: 340px !important;
  height: 300px !important;
}

How to React Player fit in div box?

2 Answers2