<header>
  <h1>Pop-up with media</h1>
  <h2>Video opens in pop-up on play</h2>
</header>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod ut incidunt dicta voluptatum! Beatae, laborum ratione sed minus ipsum doloremque nulla mollitia laudantium nostrum in, at reprehenderit nesciunt, ducimus qui?</p>
<div class="video-placeholder">
  <div class="video-player" popover id="media-pop-up">
    <figure>
      <video width="640" height="360" src='https://assets.codepen.io/5928893/video-player-video.mp4' controls loop></video>
      <figcaption>Video of Picadilly circus</figcaption>
    </figure>
    <button title="Close video player" popoverhidetarget="media-pop-up">
      <span class="sr-only">Close video player</span>
      <svg role="img" aria-hidden="true" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
      </svg>
    </button>
  </div>
</div>
<p>Qui fugit rem temporibus nisi aliquid ad voluptatibus sed quia error! Repellat maxime non, soluta, ullam ad quaerat iusto consectetur, nostrum numquam quae nemo, harum esse eius provident iste modi.</p>

@layer demo {
  [popoverhidetarget] {
    height: 44px;
    aspect-ratio: 1;
    position: absolute;
    bottom: 100%;
    left: 100%;
    font-size: var(--font-size-6);
    display: grid;
    place-items: center;
    color: var(--text-1);
    background: none;
    display: none;
    padding: 0;
  }

  [popoverhidetarget]:hover {
    color: var(--surface-2);
    background: var(--text-2);
  }

  [popover] {
    background: none;
    border: 0;
    position: static;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(0%, 0%);
    align-content: center;
    gap: var(--size-4);
    overflow: visible;
  }

  .video-player {
    display: block;
  }

  body > .video-placeholder {
    margin: var(--size-4) 0;
  }

  .video-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10.8;
    background: var(--surface-2);
    max-inline-size: var(--size-content-3);
    display: grid;
    place-items: center;
  }

  [popover]::backdrop {
    background: hsl(0 0% 90% / 0.9);
    backdrop-filter: blur(6px);
  }

  [popover]:open {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75vmin;
    aspect-ratio: 16/10;
  }

  [popover]:open [popoverhidetarget] {
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    figcaption {
      color: var(--gray-0);
    }
    [popover]::backdrop {
      background: hsl(0 0% 10% / 0.9);
    }
  }
}

@layer base {
  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  :where([popover]) {
    margin: auto;
    border-width: initial;
    border-style: solid;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--size-4);
    min-height: 100vh;
    font-family: "Google Sans", sans-serif, system-ui;
    overflow: auto;
  }

  figcaption {
    color: var(--gray-9);
    font-weight: var(--font-weight-6);
  }

  h1 {
    font-size: var(--font-size-8);
    margin: 0;
  }

  h1,
  h2 {
    text-align: center;
  }

  video {
    max-width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    width: 100%;
  }

  body > * + * {
    margin-top: var(--size-4);
  }

  header {
    display: flex;
    flex-direction: column;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

const POPUP = document.querySelector("[popover]");
const VIDEO = document.querySelector("video");

VIDEO.addEventListener("play", () => {
  if (!POPUP.matches(":open")) POPUP.showPopover();
});
POPUP.addEventListener("beforetoggle", (e) => {
  if (e.newState === "closed") VIDEO.pause();
});