Loop the teaser

The video autoplays muted in a loop, with controls kept and autoplay
removed under prefers-reduced-motion. Decision 19 records why the
YouTube nocookie embed was rejected and what autoplay does to the
bandwidth math.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: marcosqlbi

docs/decisions.md

@@ -323,11 +323,19 @@ has nothing to adapt between, and the site collects no analytics anyway.
 
 The two renditions and the poster live in `site/` (`teaser-av1.mp4`, `teaser-h264.mp4`,
 `teaser-poster.jpg`) and deploy with every site publish. The `<video>` element lists AV1
-first and H.264 as the universal fallback, is click-to-play (`preload="metadata"`), and
-costs page load only the poster. The 4K Camtasia master is kept outside the repository;
-re-encoding is two ffmpeg commands recorded in `docs/teaser/shot-script.md`. GitHub
-Pages' soft bandwidth limit is ~100 GB/month; only visitors who press play download a
-rendition, so the limit is far away at this site's traffic.
+first and H.264 as the universal fallback, and plays automatically — muted, looping,
+with controls kept visible — because the ink only reads in motion. A visitor whose
+system asks for reduced motion gets the poster and a play button instead: a small
+script removes the autoplay. A YouTube `nocookie` embed was considered for the loop and
+rejected — its privacy-enhanced mode only defers cookies until playback, which an
+autoplaying loop triggers on page load for everyone.
+
+The 4K Camtasia master is kept outside the repository; re-encoding is two ffmpeg
+commands recorded in `docs/teaser/shot-script.md`. Autoplay means every home-page visit
+downloads a rendition (about 3 MB), so GitHub Pages' ~100 GB/month soft bandwidth limit
+maps to roughly 30,000 visits a month — far beyond this site's traffic, and GitHub has
+no bandwidth meter to watch anyway. If a launch ever approaches that, the escape hatch
+is a lighter loop rendition or a caching proxy in front of the domain, not an embed.
 
 ---
 

site/index.html

@@ -81,7 +81,7 @@ <h1>The whiteboard for <span class="accent">teaching</span></h1>
       <div class="teaser-frame">
         <!-- Served from this site: no third party, and it plays where embeds are
              blocked. Decision 19 in docs/decisions.md. -->
-        <video controls playsinline preload="metadata"
+        <video controls autoplay muted loop playsinline
                poster="teaser-poster.jpg"
                title="SQLBI Whiteboard, forty seconds">
           <source src="teaser-av1.mp4" type='video/mp4; codecs="av01.0.12M.08"'>
@@ -308,5 +308,17 @@ <h2>Read next</h2>
     });
   })();
 </script>
+<script>
+  // The teaser loop is motion the visitor did not ask for. Stop it for those
+  // who asked their system for less; the poster and controls remain.
+  (function () {
+    if (!window.matchMedia || !matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
+    var teaser = document.querySelector('.teaser video');
+    if (teaser) {
+      teaser.removeAttribute('autoplay');
+      teaser.pause();
+    }
+  })();
+</script>
 </body>
 </html>