Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container.
https://i.sstatic.net/Yct2d.png
How can I ensure that the video thumbnail fits perfectly in the designated box?
Utilizing 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>
Cascading Style Sheets (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;
}
I have attempted to modify the code below, but unfortunately, it still does not completely cover the box...
https://i.sstatic.net/0GHff.png
.box .camera_video_discover {
object-fit: cover;
position: absolute;
width: 100%;
height: 100%;
display: block;
}