owncast/webroot/styles/video.css

video.video-js {
  width: 100%;
  height: 100%;
  display: block;
  min-height: 100%
}

/* show big play button when paused */
.vjs-has-started.vjs-paused .vjs-big-play-button{
  display: block;
}

.vjs-airplay .vjs-icon-placeholder::before {
  content: url("../img/airplay.png");
}

.vjs-quality-selector .vjs-icon-placeholder::before {
  content: url("../img/video-settings.png");
}

.vjs-big-play-button {
  z-index: 100;
}

.vjs-loading-spinner {
  z-index: 200;
}

/*
videojs hack!!
for some reason, there are cases where a <video class="vjs-tech"> element gets embedded twice.
we only want the first one. the second obstructs the layout.
Some context here:
https://github.com/owncast/owncast/issues/165
*/
video.vjs-tech:not([src]) {
  display: none;
}


#oc-custom-poster {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Animation time for crossfading between poster thumbs */
.custom-thumbnail-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity 2s;
}