Javascript 如何使每个视频元素以相同的大小显示？

我已经用TwilioAPI和ReactJs构建了一个视频调用平台。问题是，当两个人分别从桌面和移动设备进入房间时，移动设备上的一个人显示为正在放大，因为在我的视频元素上，我将

宽度设置为
100%
。我希望我的布局总是像www.com或google那样

这是我用来呈现参与者的代码

<div className="room">
      <div className="local-participant">
        {room ? (
          <Participant
            key={room.localParticipant.sid}
            participant={room.localParticipant}
            handleAudioToggle={handleAudioToggle}
            handleVideoToggle={handleVideoToggle}
            handleCallDisconnect={handleCallDisconnect}
            toggleAudio={toggleAudio}
            toggleVideo={toggleVideo}
            isLocal={true}
            isSharingScreen={toggleScreenShare}
          />
        ) : (
          ""
        )}
      </div>
      <div className="remote-participants">{remoteParticipants}</div>
      <Controls
          handleCallDisconnect={handleCallDisconnect}
          handleAudioToggle={handleAudioToggle}
          handleVideoToggle={handleVideoToggle}
          handleScreenToggle={handleScreenToggle}
          audio={toggleAudio}
          video={toggleVideo}
          screen={toggleScreenShare}
        />
    </div>


{房间(
) : (
""
)}
{remoteParticipants}

这是我创建视频元素的代码

<div>
    <div className="futura-20-900 margin-top-8 margin-left-8" style={{ color: "white" }}>{participant.identity}</div>
      <video ref={screenRef} autoPlay={true} style={{ display: `${isSharingScreen ? 'block' : 'none'}`}}/>
      { webcamEnabled ? <video ref={videoRef} autoPlay={true} /> : <div><img src={NoCam} /></div> }
      <audio ref={audioRef} autoPlay={true} />
    </div>


{参与者身份}
{网络修正？：}
在
视频容器上设置所需的宽度。高度将自动设置为16:9的比例

<div class="video-container">
    <video ref={...} autoPlay={true} />
</div>

.video-container {
    position: relative;
    display: block;
    width: 80vw; /* set your width here in vw */
    padding: 0;
    overflow: hidden;
}
.video-container::before {
    display: block;
    content: "";
}
.video-container::before {
    padding-top: 56.25%; /* video W:H 16:9 */
}
.video-container video,
.video-container iframe {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}