Responsive video embed

<!-- 1. plain responsive embed -->
<div class="video">
  <iframe
    src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ"
    title="Big Buck Bunny — animated short film"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen></iframe>
</div>

<!-- 2. facade: a thumbnail and a play button, swapped for the player on click -->
<h3>Click-to-play facade</h3>
<div class="video facade" id="v2" data-id="aqz-KE-bpKQ"
     data-title="Big Buck Bunny — animated short film">
  <button type="button" class="play" aria-label="Play: Big Buck Bunny — animated short film">
    <img src="https://i.ytimg.com/vi/aqz-KE-bpKQ/hqdefault.jpg" alt="" loading="lazy" width="480" height="360">
    <span class="btn" aria-hidden="true">
      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
    </span>
  </button>
</div>
<p class="under">The facade loads one image. The player only arrives if someone presses play.</p>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; background: #f6f8fb; padding: 22px; }

h3 { font-size: 1rem; color: #16202e; margin: 26px 0 10px; }
.under { font-size: .85rem; color: #8593ab; margin-top: 10px; }

/* ============ the responsive wrapper ============ */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #0f1622;
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* ================================================ */

/* ---- facade ---- */
.facade .play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.facade .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(15, 22, 34, .78);
  transition: background .16s ease, transform .16s ease;
}

.facade .play:hover .btn { background: #c93b3b; transform: translate(-50%, -50%) scale(1.06); }
.facade .play:focus-visible { outline: 3px solid #3b4fe4; outline-offset: -3px; }

.facade .btn svg { width: 26px; height: 26px; fill: #fff; }

@media (prefers-reduced-motion: reduce) {
  .facade .btn { transition: none; }
  .facade .play:hover .btn { transform: translate(-50%, -50%); }
}

document.querySelectorAll(".facade").forEach((box) => {
  box.querySelector(".play").addEventListener("click", () => {
    const frame = document.createElement("iframe");
    // autoplay=1 is what makes the click feel like it played the video
    frame.src = `https://www.youtube-nocookie.com/embed/${box.dataset.id}?autoplay=1&rel=0`;
    frame.title = box.dataset.title;
    frame.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
    frame.referrerPolicy = "strict-origin-when-cross-origin";
    frame.allowFullscreen = true;
    box.replaceChildren(frame);
    frame.focus();
  });
});