React.js中如何让视频缩略图适配容器盒子？

我正在开发一款网页端家电控制系统，配置摄像头画面时，希望视频缩略图能完美适配容器盒子，但当前画面无法与盒子匹配。

当前显示效果 #

相关React代码 #

<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">Camera Name</p>
        </div>
    </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;
}

我修改了以下CSS代码，但仍无法让缩略图完全覆盖盒子：

修改后的效果 #

修改后的CSS：

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

解决方案 #

问题核心是.box设置了15px内边距，但视频元素按容器100%宽高定位时，没有抵消这个内边距，导致无法填满容器；同时文字定位的top/left属性缺少单位，会导致样式失效。按以下步骤修改：

1. 调整视频元素定位，抵消容器内边距：

.box {
  position: relative;
  background:#1E3E75; 
  padding:15px;
  border-radius: 10px;
  margin-bottom: 30px;
  width: 340px;
  height: 300px;
  /* 新增：裁剪超出容器的视频部分，保持圆角效果 */
  overflow: hidden;
}

.box .camera_video_discover {
  object-fit: cover;
  position: absolute;
  /* 抵消容器的15px内边距 */
  top: -15px;
  left: -15px;
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  display: block;
}

2. 修复文字定位的单位问题，确保文字显示在视频上方：

.discover_item_room_name_entity_id {
  position: absolute;
  top: 20px;
  left: 100px;
  /* 确保文字层级高于视频 */
  z-index: 10;
  color: #ffffff; /* 可选：让文字在深色背景上更清晰 */
}

3. 额外优化：给ReactPlayer内部的视频元素强制设置object-fit（部分情况下ReactPlayer会忽略外层样式）：

<ReactPlayer
    className="camera_video_discover"
    url={'xxx.com'}
    controls={false}
    playing
    muted
    style={{ objectFit: 'cover' }} // 新增该行
    config={{
        file: {
            hlsOptions: {
                xhrSetup: (xhr) => {
                    xhr.setRequestHeader('Authorization', `Bearer ${cookies.get('accesstoken')}`);
                },
            },
        },
    }} 
/>

完成以上修改后，视频就能完全覆盖容器盒子，同时保持圆角裁剪，文字也能正常显示在视频上方。

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