:root {
  --player-bg: #1a1a1a;
  --player-btn-bg: #1a1a1a;
  --player-btn-size: 3rem;
  --player-video-ratio: 375/210;
  --player-bg-play-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M8 5v14l11-7z'/%3E%3C/svg%3E%0A");
  --player-bg-pause-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M6 5v14h5V5zM13 5v14h5V5z'/%3E%3C/svg%3E%0A");
  --player-bg-error-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M13.042 14.778c.139 0 .208-.052.208-.156.07-.485.178-1.898.325-4.238.147-2.34.221-4.004.221-4.992V3.52c0-.139-.052-.234-.156-.286-.277-.156-.832-.234-1.664-.234-.728 0-1.283.104-1.664.312-.087.052-.13.147-.13.286V5.47c0 .953.074 2.578.221 4.875.147 2.297.247 3.722.299 4.277.017.104.078.156.182.156h2.158zm-1.092 6.006c.59 0 1.066-.16 1.43-.481.364-.32.546-.767.546-1.339 0-.555-.182-1.005-.546-1.352-.364-.347-.84-.52-1.43-.52-.555 0-1.018.178-1.391.533-.373.355-.559.802-.559 1.339 0 .555.182.997.546 1.326.364.33.832.494 1.404.494z' fill-rule='nonzero'/%3E%3C/svg%3E%0A");
  --player-bg-loading-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-width='2' fill='none' fill-rule='evenodd' stroke='%23FFF'%3E%3Ccircle stroke-opacity='.5' cx='12' cy='12' r='7'/%3E%3Cpath d='M19 12a7 7 0 00-7-7'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --modal-bg-color: var(--color-black);
  --modal-close-top: 1.6rem;
  --modal-close-right: 1.6rem;
  --modal-video-width: 100%;
  --modal-video-height: 21rem;
  --modal-button-size: var(--player-btn-size);
}
@media screen and (min-width: 1024px) {
  :root {
    --player-btn-size: 8rem;
    --modal-close-top: 3rem;
    --modal-close-right: 3rem;
    --modal-video-width: 126rem;
    --modal-video-height: 70.8rem;
  }
}
@media screen and (min-width: 1024px) and (min-aspect-ratio: 16/9) {
  :root {
    --modal-video-width: 126rem;
    --modal-video-height: 74.9206349206vh;
  }
}

.player {
  background: center/cover var(--player-bg) no-repeat;
  cursor: pointer;
  position: relative;
}
.player::before {
  border-radius: 50%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--player-btn-size);
  height: var(--player-btn-size);
  position: absolute;
  top: calc(50% - var(--player-btn-size) * 0.5);
  left: calc(50% - var(--player-btn-size) * 0.5);
  z-index: 1;
  background-color: var(--player-btn-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 69.5652173913;
  color: white;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-property: opacity, transform;
  will-change: opacity, transform;
  pointer-events: none;
}
.player::after {
  content: "";
  display: block;
  padding-bottom: calc(100% / (var(--player-video-ratio)));
}
.player > * {
  position: absolute;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.player iframe {
  border: none;
  background: var(--player-bg);
}
.player video, .player img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.player[data-state=waiting-to-be-instantiate]::before {
  content: "waiting-to-be-instantiate";
  content: "";
  background-image: var(--player-bg-play-icon);
}
.player[data-state=instantiating]::before {
  content: "instantiating";
  content: "";
  background-image: var(--player-bg-loading-icon);
}
.player[data-state=error]::before {
  content: "error";
  content: "";
  background-image: var(--player-bg-error-icon);
}
.player[data-autoplay="1"][data-loop="1"] {
  cursor: default;
}
.player[data-autoplay="1"][data-loop="1"]::before {
  content: none !important;
}
.player[data-autoplay="1"][data-loop="1"] iframe {
  pointer-events: none;
}
.player[data-state=unstarted]::before {
  content: "unstarted";
  content: "";
  background-image: var(--player-bg-play-icon);
}
.player[data-state=unstarted] picture + iframe {
  opacity: 0.001;
}
.player[data-state=ended]::before {
  content: "ended";
  content: "";
  background-image: var(--player-bg-play-icon);
}
.player[data-state=playing]::before {
  content: "playing";
  content: "";
  background-image: var(--player-bg-pause-icon);
  opacity: 0;
  transform: scale(1.5);
}
.player[data-state=paused]::before {
  content: "paused";
  content: "";
  background-image: var(--player-bg-play-icon);
}
.player[data-state=buffering]::before {
  content: "buffering";
  content: "";
  background-image: var(--player-bg-loading-icon);
}
.player[data-state=video-cued]::before {
  content: "video-cued";
  content: "";
  background-image: var(--player-bg-play-icon);
}
@media screen and (min-width: 1024px) {
  .player {
    --player-video-ratio: 1260/708;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--modal-bg-color);
  z-index: 1010;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal:not(.show) {
  display: none;
}
.modal__close {
  --size: var(--modal-button-size);
  position: absolute;
  top: var(--modal-close-top);
  right: var(--modal-close-right);
}
.modal .player {
  width: var(--modal-video-width);
  height: var(--modal-video-height);
}
.modal .player::after {
  padding-bottom: 0;
}