Css OpenTok视频用户界面

我创建了一个应用程序，它将视频聊天与OpenTok API集成在一起。会议中可以有任意数量的用户。我希望用户界面在每个用户进入聊天室时将视频附加到右侧（publisher在最右侧），但同时也将视频居中（类似于缩放）。目前，它将视频左对齐，并将其附加到右侧，发行商位于最右侧

这是我的

video.js

代码：

<div>
<div id="sessionStatus">Session Status: {connection}</div>
{error ? (<div className="error"><strong>Error:</strong> {error}</div>) : null}
{!this.state.publishVideo || !this.state.publishAudio ? 
  <div className="row mb-2 justify-content-center"><p style={{ color: 'red' }}>Your video/audio is currently disabled. you can enable it by clicking the above buttons</p></div> : <p></p>}

<OTSession
  ref={this.otSession}
  apiKey={'key here'}
  sessionId={this.state.sessionID}
  token={this.state.token}
  onError={this.onSessionError}
  eventHandlers={this.sessionEventHandlers}
  onSignalRecieve={this.onSignalRecieve}
  
>
<div className="videoGrid">
  <OTStreams>
    <OTSubscriber
      properties={{
        insertMode: 'append',
        insertDefaultUI: true,
        style: { nameDisplayMode: 'on' }
      }}
      onSubscribe={this.onSubscribe}
      onError={this.onSubscribeError}
      eventHandlers={this.subscriberEventHandlers}
    />
  </OTStreams>
  <OTPublisher
    properties={{
      publishAudio: publishAudio,
      publishVideo: publishVideo,
      audioFallbackEnabled: false,
      showControls: false,
      name: name,
      insertMode: 'append',
      style: { nameDisplayMode: 'on' }
    }}
    onPublish={this.onPublish}
    onError={this.onPublishError}
    eventHandlers={this.publisherEventHandlers}
  />
  </div>
  <br/>
</OTSession>
</div>

.videoGrid {
  white-space:nowrap;
  margin: 0 auto; 
  text-align: center;
  margin-left: 2%;
  margin-right: 2%;
  resize: horizontal;
  overflow: auto;

}

.OT_subscriber {

    float: left;
    margin-left: 1em;
    width: 60vh !important;
    height: 45vh !important;

}
.OT_publisher {
    float: left;
    width: 60vh !important;
    height: 45vh !important;
}

.error {
    color: red;
}

对于用户界面定制方面的任何帮助，我们将不胜感激。谢谢!