select {
  width: 300px;
}

section {
  margin-bottom: 20px;
}

#localvideo {
  width: 320px;
  height: 240px;
  background-color: blue;
}

#remotecontainer {
  width: 320px;
  height: 240px;
  background-color: yellow;
  position: relative;
}

#bigscreen {
  width: 640px;
  height: 340px;
  position: relative;
}

.player-wrapper-div {
  width: 100%;
  height: 100%;
  position: relative;
}

.qnrtc-video-player {
  width: 100% !important;
  height: 100% !important;
  background: #000;
  object-fit: fill !important;
  position: relative !important;
}

/* #remotecontainer:after {
  width: 100% !important;
  height: 40px !important;
  content:"12333";
  position:absolute;
  bottom: 0px;

  color: white;
  background: black;
  opacity: 0.3;
  line-height: 40px;
  padding-left: 30px;
} */

.player-name {
  width: calc(100% - 30px) !important;
  height: 40px !important;
  line-height: 40px;
  padding-left: 30px;
  font-size: 28px;
  position: absolute;
  bottom: 0px;

  color: white;
  background: black;
  opacity: 0.3;
  z-index: 100;
}