Challenge 3: Build a Facade for an Embedded Video — Possible Solution
====================================================================

<!-- HTML -->
<div class="video-facade" id="video-facade">
  <img src="video-thumbnail.jpg" alt="Play video" width="800" height="450">
  <button class="play-button" aria-label="Play video">▶</button>
</div>

<script>
  document.getElementById("video-facade").addEventListener("click", function () {
    const iframe = document.createElement("iframe");
    iframe.src = "https://www.youtube.com/embed/VIDEO_ID?autoplay=1";
    iframe.width = "800";
    iframe.height = "450";
    iframe.allow = "autoplay; encrypted-media";
    iframe.allowFullscreen = true;

    this.replaceWith(iframe); // swap the facade out for the real embed
  });
</script>

WHY THIS WORKS
--------------
- The initial page load only includes a plain <img> (the thumbnail)
  and a small inline button — NOTHING resembling the actual YouTube
  player's JavaScript, iframe, or related scripts is present in the DOM
  or downloaded at all until the user actually clicks. This is the
  entire point of the facade pattern: the expensive third-party
  resource is never loaded for the (likely large) fraction of visitors
  who never click play, exactly addressing the chapter's point about
  third-party scripts being an easy-to-overlook INP cost.
- width="800" height="450" on the thumbnail image reserves the correct
  space immediately (Chapter 3's CLS principle) — when the iframe
  eventually replaces it with the SAME width/height, no layout shift
  occurs, since the reserved space was already correctly sized from the
  very first render.
- The click handler creates the real <iframe> ONLY at the moment of
  interaction — this is precisely the "load on demand" idea from
  Chapter 6, applied here to a third-party embed instead of a
  first-party JS module. The heavy YouTube player code only starts
  downloading and executing once the user has expressed clear intent to
  watch the video.
- this.replaceWith(iframe) swaps the entire facade element (thumbnail +
  button) out for the iframe in one DOM operation — the user sees the
  static thumbnail turn directly into a playing video with a single
  click, with no separate loading state needed for this simple case.
- Note the deliberate CONTRAST with a naive implementation: embedding
  the real YouTube iframe directly in the initial HTML would mean every
  single visitor's browser downloads and executes YouTube's full player
  JavaScript immediately on page load, regardless of whether they ever
  intend to watch the video at all — exactly the cost this facade
  pattern is designed to avoid.