How can I fit video thumbnail in box?-CodePudding

Currently, I'm making a system that can control home electrical equipment on the web. When I set camera images, I want to fit the image well in the container, but it is displayed no fit in box.

How can I fit video thumbnail in box?

React.js

<div className="discover_device col-4">
    <div className="box">
    <ReactPlayer
        className="camera_video_discover"
        url={'xxx.com'}
        controls={false}
        playing
        muted
        config={{
            file: {
                hlsOptions: {
                    xhrSetup: (xhr) => {
                        xhr.setRequestHeader('Authorization', `Bearer ${cookies.get('accesstoken')}`);
                        },
                },
            },
        }} 
        />
    <div className="discover_item_room_name_entity_id">
        <p className="discover_item_room_name_carmera">Room Name</p>
        <p className="discover_item_entity_id_camera">Camear Name</p>
    </div>
</div>

CSS

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


.discover_item_room_name_entity_id {
  position: absolute;
  top: 20;
  left: 100;
}

.discover_item_entity_id_camera {
  position: absolute;
}

.box .camera_video_discover {
  object-fit: cover;
  position: absolute;
  width: 340px;
  height: 300px;
}

CodePudding user response：

Are you typo at this code? because you don't have a class .box_discover_camera

.box_dicover_camera .camera_video_discover {
  object-fit: cover;
  position: absolute;
  width: 340px;
  height: 300px;
}

CodePudding user response：

Not sure if this will work since I don't know what kind of HTML element ReactPlayer is, but maybe adding display: block to .camera_video_discover and width: 100% and height: 100% class might do the trick.

.box .camera_video_discover {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
}