
<header class=header>
  <div class=header_content>


    <!-- Wrapper reserves space and handles the click -->
    <div class="fox-player ratio-1x1" style="--size: 80px">
      <!-- Clickable poster (image of first frame) -->
      <button class="fox-thumb" type="button" aria-label="Play animation">
        <img
          src="/images/fox-first-frame.webp"
          width="80px" height="80px"
          alt=""
          loading="eager" decoding="async"
        />
      </button>

      <!-- Hidden initially; revealed on click -->
      <stacked-alpha-video class="fox-video" inert>
        <video muted playsinline>
          <source src="/videos/av1.mp4"
                  type="video/mp4; codecs=av01.0.08M.08.0.110.01.01.01.1">
          <source src="/videos/hevc.mp4"
                  type="video/mp4; codecs=hvc1.1.6.H120.b0">
        </video>
      </stacked-alpha-video>

      <noscript>
        <img src="/images/fox-first-frame.webp" alt="">
      </noscript>
    </div>


    <a class="header_name" href="/">
      <h1>Drew Edgar</h1>
    </a>
  </div>
  <nav class=nav>
      {% assign navPages = collections.all | eleventyNavigation %}
        <ul>
        {%- for entry in navPages %}
          <li{% if entry.url == page.url %} class="current"{% endif %}>
            <a href="{{ entry.url }}">{{ entry.title }}</a>
          </li>
        {%- endfor %}
        <li>
        <button id="darkModeToggle">
        </button>
        </li>
        </ul>
  </nav>
</header>

<script type="module">
  const root = document.querySelector('.fox-player');
  const thumb = root.querySelector('.fox-thumb');
  const el = root.querySelector('.fox-video');
  const v = el.querySelector('video');

  thumb.addEventListener('click', async () => {
    thumb.classList.add('is-hidden');   // fades out poster (no layout change)
    // el.addEventListener('click', () => {
    // if (v.paused) v.play().catch(()=>{});
    // else v.pause();
    // }, { passive: true });

    // Start playback on gesture (Safari-friendly)
    try {
      await v.play();
    } catch (err) {
      // As a fallback, mute then try again (autoplay policy)
      v.muted = true;
      try { await v.play(); } catch {}
    }
  }, { passive: true });
</script>
