react-jplayer/dist/css/react-jPlayer.css

Html5 audio and video player library for React

.jp-jplayer {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
@media (max-width: 630px) {
  .jp-jplayer .jp-state-full-screen .jp-poster {
    height: auto;
  }
}
.jp-hidden {
  display: none;
}
.jp-state-no-volume-support .jp-mute,
.jp-state-no-volume-support .jp-volume-bar,
.jp-state-no-volume-support .jp-volume-bar-value {
  display: none;
}
.jp-jplayer.jp-state-full-screen {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  visibility: visible;
  position: fixed;
}
.jp-jplayer.jp-state-full-screen .jp-gui {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.jp-jplayer.jp-state-full-screen .jp-gui .jp-poster {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  z-index: -1;
  margin: 0 auto;
  position: fixed;
  display: inline-block;
}
.jp-state-audio.jp-jplayer.jp-state-full-screen .jp-media-container,
.jp-state-video.jp-jplayer.jp-state-full-screen .jp-media-container {
  top: 50%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}
.jp-state-audio.jp-jplayer.jp-state-full-screen .jp-media-container video,
.jp-state-video.jp-jplayer.jp-state-full-screen .jp-media-container video {
  width: 100%;
}