A chapter can show a recording: #clip(name), used once for the chords in the guide's mouse section

#clip reads docs/site/media/clips.toml. On the site it is the landing's
video (poster, autoplay muted loop playsinline, controls) with its
caption, and the in-view script that plays it now runs on every page;
in the book it is the poster at 7 cm with the caption. The guide shows
the chords clip under its mouse table, in place of the TODO.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

2 files changed, 20 insertions, 14 deletions

diff --git a/docs/site/site.css b/docs/site/site.css
index dc682eff..260a1b35 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -214,3 +214,6 @@ main[data-page="builtins"] .content h4 + p { margin-top:0; }
 .mode-box { display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; vertical-align:-.15em;
   font:700 .8em var(--mono); background:var(--tag); color:var(--ink); border:2px solid var(--leaf); border-radius:2px; }
 .mode-box.unsaved { background:var(--amber); border-color:var(--amber); color:#1b120a; }
+/* a recording inside a chapter */
+.content .clip.inline { margin:1.2em 0; max-width:640px; }
+.clip.inline video { display:block; width:100%; height:auto; aspect-ratio:960/700; background:var(--deep); }
diff --git a/docs/site/site.typ b/docs/site/site.typ
index 62b1292e..f50a8d9b 100644
--- a/docs/site/site.typ
+++ b/docs/site/site.typ
@@ -98,6 +98,20 @@
   ]
 ]
 
+#let in-view-script = el("script")[#(
+  "(() => { if (!('IntersectionObserver' in window)) return;
+" +
+  "  const p = el => el.player || (el.tagName === 'VIDEO' ? el : null);
+" +
+  "  const io = new IntersectionObserver(es => { for (const e of es) { const r = p(e.target); if (!r) continue;
+" +
+  "    if (e.isIntersecting) Promise.resolve(r.play()).catch(() => {}); else r.pause(); } }, {threshold: 0.25});
+" +
+  "  for (const el of document.querySelectorAll('.clip video, .cast .player')) io.observe(el);
+" +
+  "})();"
+)]
+
 #let shell(id, title, body) = html.html(lang: "en", {
   html.head({
     html.meta(charset: "utf-8")
@@ -122,6 +136,9 @@
         #el("a", (href: "player/LICENSE-asciinema-player.txt"))[asciinema-player] (Apache-2.0)
       ]
     ]
+    // after the page's own scripts (the landing's players), on every page
+    // that has a recording
+    in-view-script
   })
 })
 
@@ -179,19 +196,6 @@
 /// Plays a recording while it is on screen and pauses it once it leaves.
 /// The casts wait for it (autoPlay off) so each shows its poster frame
 /// until then; the videos autoplay by themselves too.
-#let in-view-script = el("script")[#(
-  "(() => { if (!('IntersectionObserver' in window)) return;
-" +
-  "  const p = el => el.player || (el.tagName === 'VIDEO' ? el : null);
-" +
-  "  const io = new IntersectionObserver(es => { for (const e of es) { const r = p(e.target); if (!r) continue;
-" +
-  "    if (e.isIntersecting) Promise.resolve(r.play()).catch(() => {}); else r.pause(); } }, {threshold: 0.25});
-" +
-  "  for (const el of document.querySelectorAll('.clip video, .cast .player')) io.observe(el);
-" +
-  "})();"
-)]
 
 #document(href("index"), title: "pardes", shell("index", "pardes")[
   #el("h1", (class: "masthead"))[pardes]
@@ -231,7 +235,6 @@
     el("link", (rel: "stylesheet", href: "player/asciinema-player.css"))[]
     player-script
   }
-  #in-view-script
 ])
 
 #for p in pages.slice(1, -1) {