src/_includes/components/nav-header.liquid

   1
   2 <header class=header>
   3   <div class=header_content>
   4
   5
   6     <!-- Wrapper reserves space and handles the click -->
   7     <div class="fox-player ratio-1x1" style="--size: 80px">
   8       <!-- Clickable poster (image of first frame) -->
   9       <button class="fox-thumb" type="button" aria-label="Play animation">
  10         <img
  11           src="/images/fox-first-frame.webp"
  12           width="80px" height="80px"
  13           alt=""
  14           loading="eager" decoding="async"
  15         />
  16       </button>
  17
  18       <!-- Hidden initially; revealed on click -->
  19       <stacked-alpha-video class="fox-video" inert>
  20         <video muted playsinline>
  21           <source src="/videos/av1.mp4"
  22                   type="video/mp4; codecs=av01.0.08M.08.0.110.01.01.01.1">
  23           <source src="/videos/hevc.mp4"
  24                   type="video/mp4; codecs=hvc1.1.6.H120.b0">
  25         </video>
  26       </stacked-alpha-video>
  27
  28       <noscript>
  29         <img src="/images/fox-first-frame.webp" alt="">
  30       </noscript>
  31     </div>
  32
  33
  34     <a class="header_name" href="/">
  35       <h1>Drew Edgar</h1>
  36     </a>
  37   </div>
  38   <nav class=nav>
  39       {% assign navPages = collections.all | eleventyNavigation %}
  40         <ul>
  41         {%- for entry in navPages %}
  42           <li{% if entry.url == page.url %} class="current"{% endif %}>
  43             <a href="{{ entry.url }}">{{ entry.title }}</a>
  44           </li>
  45         {%- endfor %}
  46         <li>
  47         <button id="darkModeToggle">
  48         </button>
  49         </li>
  50         </ul>
  51   </nav>
  52 </header>
  53
  54 <script type="module">
  55   const root = document.querySelector('.fox-player');
  56   const thumb = root.querySelector('.fox-thumb');
  57   const el = root.querySelector('.fox-video');
  58   const v = el.querySelector('video');
  59
  60   thumb.addEventListener('click', async () => {
  61     thumb.classList.add('is-hidden');   // fades out poster (no layout change)
  62     // el.addEventListener('click', () => {
  63     // if (v.paused) v.play().catch(()=>{});
  64     // else v.pause();
  65     // }, { passive: true });
  66
  67     // Start playback on gesture (Safari-friendly)
  68     try {
  69       await v.play();
  70     } catch (err) {
  71       // As a fallback, mute then try again (autoplay policy)
  72       v.muted = true;
  73       try { await v.play(); } catch {}
  74     }
  75   }, { passive: true });
  76 </script>