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;*/
  }
  .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;
  }
}