<section class="video-container">
  <video id="custom-video">
    <source src="https://assets.codepen.io/159218/near-the-shallow-water.mp4" type="video/mp4">
  </video>
  <div class="controls">
    <div class="inner">
      <button commandfor="custom-video" command="play">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
        </svg>
        <span class="sr-only">Play</span>
      </button>
      <button commandfor="custom-video" command="pause">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
        </svg>

        <span class="sr-only">Play</span>
      </button>
    </div>
    <button commandfor="custom-video" command="request-fullscreen">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
      </svg>

      <span class="sr-only">Fullscreen</span>
    </button>
  </div>

</section>

@layer base, containerAnimations, videoStyles, controls;

@layer containerAnimations {
  @property --rotateH {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  @property --rotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  /* Create the animations, spin and hue rotate. pause the animation and set it to runningwhen button is hovered or video is playing (added some of the default styling to videoStyles to keep easy reference of animations here) */
  .video-container {
    --rotating: var(--rotate);
    --color-hue: hsl(var(--rotateH) 77% 60%);
    background: hsl(var(--rotateH) 57% 40%);
    animation-name: spinH, spin;
    animation-duration: 20s, 20s;
    animation-iteration-count: infinite, infinite;
    animation-play-state: paused, paused;
    &:has(button:is(:hover, :focus)) {
      animation-play-state: running, running;
    }
  }

  @keyframes spinH {
    0% {
      --rotateH: 0deg;
    }
    100% {
      --rotateH: 360deg;
    }
  }

  @keyframes spin {
    0% {
      --rotate: 0deg;
    }
    100% {
      --rotate: 720deg;
    }
  }
}

@layer controls {
  [command="pause"] {
    display: none;
  }

  /* Start animation when video is playing */
  /* if we had the :playing pseudo class cross-browser in CSS this wouldn't be neccessary, how cool would that be? */
  .video-container:has(.playing) {
    animation-play-state: running, running;
    [command="play"] {
      display: none;
    }
    [command="pause"] {
      display: block;
    }
  }

  button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: transparent;
    border-radius: 50%;
    overflow: hidden;
    width: 5rem;
    aspect-ratio: 1;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
      rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
      rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

    &::after {
      --color-black: #010101;
      position: absolute;
      inset: 0;
      content: "";
      filter: blur(10px);
      background: var(--color-hue);
      /* Create the hue gradient, --color-hue will be passed by the video-container */
      background-image: conic-gradient(
        from var(--rotating),
        var(--color-hue),
        var(--color-black),
        var(--color-hue),
        var(--color-black)
      );
      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px,
        rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }

    /* Icon filter effect on hover */
    &:hover svg {
      filter: drop-shadow(0 0 3px #fff);
    }

    svg {
      position: relative;
      z-index: 2;
      color: white;
      transition: filter 0.3s;
    }
  }
  [command="request-fullscreen"] {
    position: absolute;
    top: 50%;
    inset-inline-end: 1rem;
    width: 3rem;
    transform: translateY(-50%);
    background: var(--color-hue);
    &::after {
      background: rgba(0 0 0 / 0.8);
    }
    svg {
      width: 1.6rem;
    }
  }
}

@layer videoStyles {
  .inner {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(
      to bottom,
      rgba(0 0 0 / 0.68) 0%,
      rgba(0 0 0 / 1) 100%
    );
    border-radius: 0 0 0.55rem 0.55rem;
  }

  .video-container {
    max-width: 800px;
    margin: 10vh auto;
    border-radius: 0.6rem;
    overflow: hidden;
  }

  .controls {
    position: relative;
    display: flex;
    padding: 2px 1px 1px;
  }

  video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    margin: 0;
    font-family: "Annie Use Your Telescope", cursive;
    /*     background: radial-gradient(black 70%, transparent 30%),
      radial-gradient(black 70%, transparent 30%), #010101;
    background-size: 5px 5px;
 */
    background-image: radial-gradient(circle, #e4e4f2, #4a4e69);
  }

  .icon {
    width: 2rem;
    aspect-ratio: 1;
  }

  .sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
  }
}

@media (prefers-reduced-motion) {
  *,
  *::after,
  *::before {
    animation: none;
  }
}

// If we had cross-browser support for :playing pseudo class in css, this wouldn't be needed at all
const videos = document.querySelectorAll("video");

videos.forEach((video) => {
  video.addEventListener("play", () => {
    video.classList.add("playing");
  });

  video.addEventListener("pause", () => {
    video.classList.remove("playing");
  });
});