.youtube-player {
  display: block;
  position: relative;
  cursor: pointer;
  aspect-ratio: 637/358.9;
  border-radius: var(--radius-m);
  overflow: hidden;

  @media (max-width: 767px) {
    aspect-ratio: 336/188.53;
  }
}

.youtube-player--large {
  aspect-ratio: 638/404.47;
}

.youtube-player--radius-sm {
  border-radius: var(--radius-s);
}

.youtube-player:after {
  content: '';
   background-color: rgb(0 0 0 / 0.12);
  position: absolute;
  inset: 0;
}

.youtube-player__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.youtube-player__icon {
  margin: auto;
  position: absolute;
  inset: 0;
  z-index: 2;
}

.youtube-player iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.youtube-player.is-active {
  .youtube-player__thumbnail,
  .youtube-player__icon {
    display: none;
  }

  iframe {
    pointer-events: all;
  }
}