lbry-desktop/src/ui/scss/component/_content.scss

.content__cover {
  // Video thumbnail with play/download button
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: auto;

  &:not(.card__media--nsfw) {
    background-color: #000; // solid black to blend nicely when the video starts (if it doesn't take the full width)
  }

  &:hover {
    cursor: pointer;

    .button--view,
    .button--play {
      background-color: $lbry-teal-2;
    }
  }
}

.content__embedded {
  @include thumbnail;
  position: relative;

  video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;

    &:hover {
      cursor: pointer;
    }
  }

  &:-webkit-full-screen {
    width: 100%;
    height: 100%;
  }
}

.content__empty {
  @include thumbnail;
  align-items: center;
  background-color: $lbry-black;
  color: $lbry-white;
  display: flex;
  justify-content: center;
  width: 100%;
}

.content__empty--nsfw,
.card__media--nsfw {
  background-color: $lbry-grape-3;
}

.card__media--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.content__loading {
  width: 100%;
  height: 100%;

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--spacing-large);
  background-color: #000;
}

.content__loading-text {
  color: $lbry-white;
}

.content__view {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;

  iframe {
    width: 100%;
    height: 100%;
    background-color: $lbry-white;
  }
}

.content__view--container {
  background-color: black;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
}