Add a /videos/ page with click-to-load explainer videos

[JacobStephens2]

Summary

Adds a /videos/ page that lists the five explainer videos by audience. Each video starts as a self-hosted thumbnail that links to https://youtu.be/<id>. With JavaScript on, playing one swaps in YouTube's no-cookie player in the same spot.

 site/
+├── videos/
+│   ├── index.html      # five entries: audience · length, title, one sentence, thumbnail link
+│   ├── videos.css      # text beside a 16:9 player box; stacks below 850px
+│   └── <id>.jpg ×5     # maxresdefault thumbnails, 1280×720
+├── fonts/              # Big Shoulders Display 800 + JetBrains Mono, latin woff2, OFL texts
+│   └── fonts.css
 ├── main.js             # + click / Enter / Space → <iframe youtube-nocookie …?autoplay=1 title=…>
 ├── sitemap.xml         # + /videos/
 ├── index.html          # + "Videos" in the credit line and footer
 ├── how-it-works/index.html  # + "Videos" in the nav, the "Next:" line and the footer
 └── tests/pages.test.cjs     # + /videos/ in publicPaths, + 10 tests

The other pages load their fonts from fonts.googleapis.com. That would break the criterion "no request to any YouTube or Google host", so this page self-hosts the same faces under site/fonts/ instead. The other pages are unchanged.

on activate(link)            # plain left-click, Enter, or Space
  id = path of link's youtu.be URL
  replace link with iframe(youtube-nocookie.com/embed/<id>?autoplay=1, title = entry's h2)
  focus the iframe
modified click (ctrl/cmd/shift/middle) → normal link to YouTube

Captions stay off by default (no cc_load_policy). Each entry's sentence is drawn from that video's YouTube description.

Evidence

• Before: /videos/ returns 404, and the sitemap lists 4 pages.
  After: cd site && npm test passes 30 of 30, including docs:check.

The new tests:

homepage and guide → click "Videos" → /videos/                      (JS off)
5 entries in order: [title, audience, length, youtu.be href]; one sentence each;
  img src /videos/<id>.jpg, 1280×720, alt "Title card: <title>. …"; link opens youtu.be  (JS off)
load + scroll all thumbnails → off-origin requests == []; then play #3 →
  off-origin requests == [youtube-nocookie.com/embed/oL-5pi1AFC4?autoplay=1],
  one iframe in place of the thumbnail, title "How thirdshift works", 16:9
Tab → focused play link has an outline; Enter plays #1; Space plays #2 without scrolling; focus moves to the player
320 / 390 / 1280 px × JS off/on (on: after playing one) → no element or page overflow

I also made the tests fail on purpose:

• Swapping /fonts/fonts.css for a Google Fonts link fails the off-origin request test.
• Turning off the Space handler fails the keyboard test.
• Restoring the first version's two-sentence entry fails the one-sentence assertion.

I checked the layout visually at 1280 and 390 px.

Rust is untouched, so I did not run cargo test.

Merge Danger

Door: two-way

The change is all new static files plus link additions. Reverting it removes the page.

Blast Radius: small

main.js is shared by every page. The new handler only binds to a.video-play, and only /videos/ has those links. The homepage and How thirdshift works gain one link each in their existing link lists.

The fonts directory is new, and only /videos/ uses it.

Review coverage

Both reviewers read every changed file. The binaries were inspected: the thumbnails were viewed, and the woff2 files were checked with file/xxd.

The Spec axis inspected the two OFL texts by size only. The Standards axis read them in full.

Unaddressed findings

Standards

• Primitive Obsession: the id is parsed from link.href in playVideo (site/main.js). Declined.
  • The youtu.be/<id> href is the page's single statement of the id, and it must stay a working link without JavaScript. A data- attribute would duplicate it.
  • Two tests pin this down. "the videos page lists every video in order…" fixes every href to https://youtu.be/<id>. "…requests nothing from YouTube or Google until a video plays…" asserts the player URL derived from it.
• Shotgun Surgery: site/docs/index.html (via site/generate-docs.mjs:67) and the site/prompts/index.html footer don't link to /videos/. Declined.
  • Issue Add a /videos/ page to thirdshift.app for the explainer videos #851 scopes navigation to "link the page from the homepage and from the How thirdshift works page".
  • It also lists "Redesigning existing pages beyond adding the link" as out of scope.
• Divergent Change (borderline): a videos-only handler in the shared main.js. The reviewer offered this as a note only. It follows the existing per-page blocks (fold reveal, copy buttons, press line).

Spec

None. The one Spec finding (two sentences in one entry) failed when I ran it, so I fixed the entry and kept the check as a test.

Security

None. The change adds static pages, self-hosted fonts and a click-to-load YouTube player; the player URL is built only from the page's own authored links, with the id URL-encoded.

Closes #851

🤖 Generated with Claude Code

Built with claude · claude-opus-5-5 · medium

Security review outcome

No unaddressed introduced findings.