lbry-desktop/ui/scss/component/_video.scss

video {
  object-fit: contain;
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.video {
  background: #000;
  color: white;
}

.video-embedded {
  max-width: $width-page-constrained;
  max-height: $height-video-embedded;
  height: $height-video-embedded;
  position: relative; /*for .plyr below*/
  video {
    height: 100%;
  }
  &.video--hidden {
    height: $height-video-embedded;
  }
  &.video--active {
    /*background: none;*/
  }

  .video--loading--screen {
    .loading--spinner {
      width: 100px;
      height: 100px;
      background-color: white;
      margin: auto;

      animation-name: spin;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;

      @keyframes spin {
        from { transform: rotate(0deg) }
        to { transform: rotate(-360deg) }
      }
    }
    
    .video--loading--status {
      color: white;
    }
  }

  .plyr {
    top: 50%;
    transform: translateY(-50%);
  }
}

.video__cover {
  text-align: center;
  height: 100%;
  width: 100%;
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  .video__play-button { @include absolute-center(); }
}
.video__play-button {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: none;
  font-size: $spacing-vertical * 3;
  color: white;
  z-index: 1;
  background: $color-black-transparent;
  opacity: 0.6;
  left: 0;
  top: 0;
  &:hover {
    opacity: 1;
    transition: opacity $transition-standard;
  }
}