diff --git a/echo/frontend/src/components/release/ReleaseVideoModal.test.tsx b/echo/frontend/src/components/release/ReleaseVideoModal.test.tsx
index c0fa9339..3794b60b 100644
--- a/echo/frontend/src/components/release/ReleaseVideoModal.test.tsx
+++ b/echo/frontend/src/components/release/ReleaseVideoModal.test.tsx
@@ -40,6 +40,22 @@ vi.mock("@/components/layout/TransitionCurtainProvider", () => ({
 	useTransitionCurtain: () => curtainState,
 }));
 
+// Captures land here instead of a network; each test reads what it needs.
+const captured: Array<{ event: string; props: Record<string, unknown> }> = [];
+
+vi.mock("@posthog/react", () => ({
+	usePostHog: () => ({
+		capture: (event: string, props: Record<string, unknown>) => {
+			captured.push({ event, props });
+		},
+	}),
+}));
+
+// A non-default language, so the assertions prove the real one is carried.
+vi.mock("@/hooks/useLanguage", () => ({
+	useLanguage: () => ({ language: "nl-NL" }),
+}));
+
 import { ReleaseVideoModal } from "./ReleaseVideoModal";
 import { getReleases } from "./releases";
 import { RELEASE_VIDEO_SEEN_KEY } from "./releaseVideo";
@@ -73,6 +89,7 @@ beforeEach(() => {
 	curtainState.isActive = false;
 	meState.data = { settings: {} };
 	meState.isSuccess = true;
+	captured.length = 0;
 	vi.stubGlobal(
 		"fetch",
 		vi.fn(async () => new Response(null, { status: 200 })),
@@ -260,6 +277,171 @@ describe("opening it on demand", () => {
 	});
 });
 
+// What the analytics must answer: did they watch, how far, in which language,
+// from which trigger. The player never loads in jsdom, so the widget messages
+// are hand-delivered exactly as the embed would post them.
+describe("analytics", () => {
+	const EMBED_ORIGIN = "https://www.youtube-nocookie.com";
+
+	const capturesOf = (event: string) =>
+		captured.filter((capture) => capture.event === event);
+
+	const frameElement = () =>
+		screen.getByTitle("Release video") as HTMLIFrameElement;
+
+	const deliver = (info: Record<string, unknown>) => {
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: JSON.stringify({ event: "infoDelivery", info }),
+				origin: EMBED_ORIGIN,
+				source: frameElement().contentWindow,
+			}),
+		);
+	};
+
+	it("records the automatic showing with language, version and trigger", () => {
+		renderModal();
+		const opens = capturesOf("whats_new_modal_opened");
+		expect(opens).toHaveLength(1);
+		expect(opens[0].props).toMatchObject({
+			language: "nl-NL",
+			trigger: "auto",
+			version: LATEST.version,
+		});
+		expect(typeof opens[0].props.seconds_since_page_load).toBe("number");
+	});
+
+	it("marks a sidebar showing as manual", async () => {
+		meState.data = { settings: { [RELEASE_VIDEO_SEEN_KEY]: LATEST.version } };
+		const Reopen = () => {
+			const [requested, handlers] = useDisclosure(false);
+			return (
+				<>
+					<button onClick={handlers.open} type="button">
+						What's new
+					</button>
+					<ReleaseVideoModal
+						onRequestedClose={handlers.close}
+						requested={requested}
+					/>
+				</>
+			);
+		};
+		render(
+			<QueryClientProvider client={new QueryClient()}>
+				<I18nProvider i18n={i18n}>
+					<MantineProvider>
+						<Reopen />
+					</MantineProvider>
+				</I18nProvider>
+			</QueryClientProvider>,
+		);
+		expect(capturesOf("whats_new_modal_opened")).toHaveLength(0);
+
+		fireEvent.click(screen.getByRole("button", { name: "What's new" }));
+		await waitFor(() => {
+			expect(capturesOf("whats_new_modal_opened")).toHaveLength(1);
+		});
+		expect(capturesOf("whats_new_modal_opened")[0].props.trigger).toBe(
+			"manual",
+		);
+	});
+
+	it("turns the embed's own messages into started, progress and completed", () => {
+		renderModal();
+		deliver({ currentTime: 0, duration: 100, playerState: 1 });
+		deliver({ currentTime: 1 });
+		deliver({ currentTime: 2 });
+		expect(capturesOf("whats_new_video_started")).toHaveLength(1);
+
+		deliver({ currentTime: 30 });
+		const progress = capturesOf("whats_new_video_progress");
+		expect(progress).toHaveLength(1);
+		expect(progress[0].props.milestone_percent).toBe(25);
+
+		deliver({ currentTime: 100, playerState: 0 });
+		expect(capturesOf("whats_new_video_progress")).toHaveLength(4);
+		const completed = capturesOf("whats_new_video_completed");
+		expect(completed).toHaveLength(1);
+		expect(completed[0].props.video_duration_seconds).toBe(100);
+	});
+
+	it("ignores messages that are not from the embed", () => {
+		renderModal();
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: JSON.stringify({
+					event: "infoDelivery",
+					info: { playerState: 1 },
+				}),
+				origin: "https://www.youtube.com",
+				source: frameElement().contentWindow,
+			}),
+		);
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: JSON.stringify({
+					event: "infoDelivery",
+					info: { playerState: 1 },
+				}),
+				origin: EMBED_ORIGIN,
+				source: window,
+			}),
+		);
+		expect(capturesOf("whats_new_video_started")).toHaveLength(0);
+	});
+
+	it("reports an unwatched showing when closed without playing", async () => {
+		renderModal();
+		screen.getByLabelText("Close and go to dembrane").click();
+		await waitFor(() => {
+			expect(capturesOf("whats_new_modal_closed")).toHaveLength(1);
+		});
+		expect(capturesOf("whats_new_modal_closed")[0].props).toMatchObject({
+			reason: "dismissed",
+			video_watched: false,
+			video_watched_seconds: 0,
+		});
+	});
+
+	it("carries the watch summary on close", async () => {
+		renderModal();
+		deliver({ currentTime: 0, duration: 100, playerState: 1 });
+		deliver({ currentTime: 1 });
+		deliver({ currentTime: 2 });
+
+		screen.getByLabelText("Close and go to dembrane").click();
+		await waitFor(() => {
+			expect(capturesOf("whats_new_modal_closed")).toHaveLength(1);
+		});
+		const summary = capturesOf("whats_new_modal_closed")[0].props;
+		expect(summary).toMatchObject({
+			video_duration_seconds: 100,
+			video_watched: true,
+			video_watched_seconds: 2,
+		});
+		expect(summary.video_max_percent).toBe(2);
+	});
+
+	it("flushes the summary once when the tab goes, not again on close", async () => {
+		renderModal();
+		fireEvent(window, new Event("pagehide"));
+		expect(capturesOf("whats_new_modal_closed")).toHaveLength(1);
+		expect(capturesOf("whats_new_modal_closed")[0].props.reason).toBe(
+			"pagehide",
+		);
+
+		screen.getByLabelText("Close and go to dembrane").click();
+		await waitFor(() => {
+			expect(modalIsOpen()).toBe(false);
+		});
+		expect(capturesOf("whats_new_modal_closed")).toHaveLength(1);
+	});
+});
+
 describe("typography", () => {
 	it("renders nothing italic", () => {
 		const { baseElement } = renderModal();
diff --git a/echo/frontend/src/components/release/ReleaseVideoModal.tsx b/echo/frontend/src/components/release/ReleaseVideoModal.tsx
index 7f979185..528c140b 100644
--- a/echo/frontend/src/components/release/ReleaseVideoModal.tsx
+++ b/echo/frontend/src/components/release/ReleaseVideoModal.tsx
@@ -1,21 +1,31 @@
 import { t } from "@lingui/core/macro";
 import { Modal, Stack } from "@mantine/core";
+import { usePostHog } from "@posthog/react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useId, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useAuthenticated } from "@/components/auth/hooks";
 import { useTransitionCurtain } from "@/components/layout/TransitionCurtainProvider";
 import { API_BASE_URL } from "@/config";
 import { usePrefersReducedMotion } from "@/features/sidebar/animations/motion";
+import { useLanguage } from "@/hooks/useLanguage";
 import { useV2Me } from "@/hooks/useV2Me";
 import styles from "./ReleaseVideoModal.module.css";
 import {
 	latestRelease,
+	playerBridgeUrl,
 	RELEASE_VIDEO_SEEN_KEY,
 	shouldShowReleaseVideo,
+	YOUTUBE_EMBED_ORIGIN,
 	youtubeEmbedUrl,
 } from "./releaseVideo";
+import {
+	createWatchTracker,
+	playerInfoFromMessage,
+	type WatchEvent,
+	type WatchTracker,
+} from "./videoWatchTracker";
 
 /**
  * The release video modal: one video, one title, one description, shown once
@@ -42,9 +52,18 @@ import {
  *
  * Dismissing is the whole interaction: click the backdrop, press escape, or hit
  * the close button, and the newest version is written to app_user.settings.
- * Seen means dismissed, not watched, so no YouTube Player API is loaded. After
- * that it only comes back when the user asks for it from the sidebar's
- * "What's new".
+ * Seen means dismissed, not watched. After that it only comes back when the
+ * user asks for it from the sidebar's "What's new".
+ *
+ * Engagement is measured, not stored. PostHog events cover the showing
+ * (whats_new_modal_opened, with an auto/manual trigger), playback
+ * (whats_new_video_started, whats_new_video_progress at the milestones,
+ * whats_new_video_completed) and the roll-up (whats_new_modal_closed).
+ * Playback state comes from the embed's own postMessage stream (enablejsapi=1
+ * plus a `listening` handshake), so no YouTube script is loaded, `script-src`
+ * stays untouched, and the frame stays on the nocookie origin. Milestones go
+ * out the moment they are crossed, so a tab closed mid-video still leaves a
+ * record; pagehide flushes the summary for the walk-away case.
  *
  * Typography is held to two combinations, both defined in the adjacent
  * stylesheet: the two titles at one size, the copy below them at the other.
@@ -56,6 +75,9 @@ interface ReleaseVideoModalProps {
 	onRequestedClose?: () => void;
 }
 
+/** The id the widget echoes back in every message; one player, one constant. */
+const PLAYER_BRIDGE_ID = "release-video-modal";
+
 export const ReleaseVideoModal = ({
 	requested = false,
 	onRequestedClose,
@@ -66,6 +88,8 @@ export const ReleaseVideoModal = ({
 	const queryClient = useQueryClient();
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const titleId = useId();
+	const posthog = usePostHog();
+	const { language } = useLanguage();
 
 	// Closes the modal immediately, without waiting on the network. If the write
 	// fails the modal returns on the next load, which is the recoverable
@@ -73,6 +97,7 @@ export const ReleaseVideoModal = ({
 	const [dismissed, setDismissed] = useState(false);
 
 	const release = latestRelease();
+	const releaseVersion = release?.version;
 
 	const markSeen = useMutation({
 		mutationFn: async (version: string) => {
@@ -106,7 +131,168 @@ export const ReleaseVideoModal = ({
 					release.version,
 				)));
 
+	const embedUrl = release ? youtubeEmbedUrl(release.videoUrl) : null;
+	const embedSrc = embedUrl
+		? playerBridgeUrl(embedUrl, window.location.origin)
+		: null;
+
+	const iframeRef = useRef<HTMLIFrameElement>(null);
+	const trackerRef = useRef<WatchTracker>(createWatchTracker());
+	const openedAtRef = useRef(0);
+	const openRecordedRef = useRef(false);
+	const summarySentRef = useRef(false);
+	const triggerRef = useRef<"auto" | "manual">("auto");
+
+	// One record per showing. The guard absorbs StrictMode re-runs and
+	// dependency refires, so a showing captures exactly once, and reopening
+	// from the sidebar starts a fresh one.
+	useEffect(() => {
+		if (!opened) {
+			openRecordedRef.current = false;
+			return;
+		}
+		if (openRecordedRef.current || !releaseVersion) return;
+		openRecordedRef.current = true;
+
+		trackerRef.current = createWatchTracker();
+		openedAtRef.current = Date.now();
+		summarySentRef.current = false;
+		triggerRef.current = requested ? "manual" : "auto";
+
+		posthog?.capture("whats_new_modal_opened", {
+			language,
+			// How deep into the visit the modal appeared. Deliberately not a
+			// time-since-login guess from the client: the person's real login
+			// and activity history already lives in PostHog, so recency is a
+			// query-side join against user_logged_in / prior events.
+			seconds_since_page_load: Math.round(performance.now() / 1000),
+			trigger: triggerRef.current,
+			version: releaseVersion,
+		});
+	}, [opened, language, posthog, releaseVersion, requested]);
+
+	// Kept in a ref so the message listener below never holds a stale closure
+	// and never has to re-subscribe on a render.
+	const captureWatchEvent = (watchEvent: WatchEvent) => {
+		const base = {
+			language,
+			trigger: triggerRef.current,
+			version: releaseVersion,
+		};
+		if (watchEvent.type === "started") {
+			posthog?.capture("whats_new_video_started", {
+				...base,
+				seconds_after_open: Math.round(
+					(Date.now() - openedAtRef.current) / 1000,
+				),
+			});
+			return;
+		}
+		if (watchEvent.type === "milestone") {
+			posthog?.capture("whats_new_video_progress", {
+				...base,
+				milestone_percent: watchEvent.milestone,
+			});
+			return;
+		}
+		const snap = trackerRef.current.snapshot();
+		posthog?.capture("whats_new_video_completed", {
+			...base,
+			video_duration_seconds: snap.durationSeconds,
+			video_watched_seconds: snap.watchedSeconds,
+		});
+	};
+	const captureWatchEventRef = useRef(captureWatchEvent);
+	useEffect(() => {
+		captureWatchEventRef.current = captureWatchEvent;
+	});
+
+	const flushSummary = (reason: "dismissed" | "pagehide") => {
+		if (summarySentRef.current || !openRecordedRef.current) return;
+		summarySentRef.current = true;
+		const snap = trackerRef.current.snapshot();
+		posthog?.capture("whats_new_modal_closed", {
+			language,
+			modal_open_seconds: Math.round((Date.now() - openedAtRef.current) / 1000),
+			reason,
+			trigger: triggerRef.current,
+			version: releaseVersion,
+			video_duration_seconds: snap.durationSeconds,
+			video_max_percent: snap.maxPercent,
+			video_percent_watched: snap.percentWatched,
+			video_watched: snap.started,
+			video_watched_seconds: snap.watchedSeconds,
+		});
+	};
+	const flushSummaryRef = useRef(flushSummary);
+	useEffect(() => {
+		flushSummaryRef.current = flushSummary;
+	});
+
+	// The listening handshake wakes the widget: it answers with initialDelivery
+	// and then streams infoDelivery while playing. The hello is resent on an
+	// interval until the first message lands, because the frame may still be
+	// booting when the modal opens.
+	useEffect(() => {
+		if (!opened || !embedSrc) return;
+
+		let handshaken = false;
+
+		const postListening = () => {
+			iframeRef.current?.contentWindow?.postMessage(
+				JSON.stringify({
+					channel: "widget",
+					event: "listening",
+					id: PLAYER_BRIDGE_ID,
+				}),
+				YOUTUBE_EMBED_ORIGIN,
+			);
+		};
+
+		const onMessage = (event: MessageEvent) => {
+			if (event.origin !== YOUTUBE_EMBED_ORIGIN) return;
+			if (
+				!iframeRef.current ||
+				event.source !== iframeRef.current.contentWindow
+			) {
+				return;
+			}
+			handshaken = true;
+			const info = playerInfoFromMessage(event.data);
+			if (!info) return;
+			for (const watchEvent of trackerRef.current.handleInfo(info)) {
+				captureWatchEventRef.current(watchEvent);
+			}
+		};
+
+		window.addEventListener("message", onMessage);
+		postListening();
+		const handshake = window.setInterval(() => {
+			if (handshaken) {
+				window.clearInterval(handshake);
+				return;
+			}
+			postListening();
+		}, 500);
+
+		return () => {
+			window.removeEventListener("message", onMessage);
+			window.clearInterval(handshake);
+		};
+	}, [opened, embedSrc]);
+
+	// Milestones above are durable on their own; this recovers the close
+	// summary when the tab goes instead of the modal. posthog-js flushes its
+	// queue with sendBeacon on pagehide, so the capture still makes it out.
+	useEffect(() => {
+		if (!opened) return;
+		const onPageHide = () => flushSummaryRef.current("pagehide");
+		window.addEventListener("pagehide", onPageHide);
+		return () => window.removeEventListener("pagehide", onPageHide);
+	}, [opened]);
+
 	const close = () => {
+		flushSummary("dismissed");
 		setDismissed(true);
 		onRequestedClose?.();
 		if (release) markSeen.mutate(release.version);
@@ -114,8 +300,6 @@ export const ReleaseVideoModal = ({
 
 	if (!release) return null;
 
-	const embedUrl = youtubeEmbedUrl(release.videoUrl);
-
 	return (
 		<Modal.Root
 			centered
@@ -146,13 +330,14 @@ export const ReleaseVideoModal = ({
 				</Modal.Header>
 				<Modal.Body style={{ padding: "0 2rem 2rem" }}>
 					<Stack gap="lg">
-						{embedUrl ? (
+						{embedSrc ? (
 							<div className={styles.videoFrame}>
 								<iframe
 									allow="accelerometer; clipboard-write; encrypted-media; picture-in-picture; web-share"
 									allowFullScreen
 									className={styles.video}
-									src={embedUrl}
+									ref={iframeRef}
+									src={embedSrc}
 									title={t`Release video`}
 								/>
 							</div>
@@ -177,9 +362,7 @@ export const ReleaseVideoModal = ({
 							</ReactMarkdown>
 						</div>
 
-						<p className={styles.note}>
-							{release.note}
-						</p>
+						<p className={styles.note}>{release.note}</p>
 					</Stack>
 				</Modal.Body>
 			</Modal.Content>
diff --git a/echo/frontend/src/components/release/releaseVideo.test.ts b/echo/frontend/src/components/release/releaseVideo.test.ts
index b13c5fbe..6c85ad84 100644
--- a/echo/frontend/src/components/release/releaseVideo.test.ts
+++ b/echo/frontend/src/components/release/releaseVideo.test.ts
@@ -3,8 +3,10 @@ import { describe, expect, it } from "vitest";
 import { getReleases } from "./releases";
 import {
 	latestRelease,
+	playerBridgeUrl,
 	RELEASE_VIDEO_SEEN_KEY,
 	shouldShowReleaseVideo,
+	YOUTUBE_EMBED_ORIGIN,
 	youtubeEmbedUrl,
 } from "./releaseVideo";
 
@@ -148,3 +150,19 @@ describe("youtubeEmbedUrl", () => {
 		expect(youtubeEmbedUrl("https://www.youtube.com/watch?v=abc")).toBeNull();
 	});
 });
+
+describe("playerBridgeUrl", () => {
+	it("switches on the widget protocol without leaving the nocookie origin", () => {
+		const bridged = playerBridgeUrl(
+			"https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?rel=0",
+			"https://dashboard.dembrane.com",
+		);
+		const url = new URL(bridged);
+		expect(url.origin).toBe(YOUTUBE_EMBED_ORIGIN);
+		expect(url.searchParams.get("rel")).toBe("0");
+		expect(url.searchParams.get("enablejsapi")).toBe("1");
+		expect(url.searchParams.get("origin")).toBe(
+			"https://dashboard.dembrane.com",
+		);
+	});
+});
diff --git a/echo/frontend/src/components/release/releaseVideo.ts b/echo/frontend/src/components/release/releaseVideo.ts
index 7ed861b4..7e08411b 100644
--- a/echo/frontend/src/components/release/releaseVideo.ts
+++ b/echo/frontend/src/components/release/releaseVideo.ts
@@ -42,6 +42,12 @@ export const shouldShowReleaseVideo = (
 	return seen !== latestVersion;
 };
 
+/**
+ * The one YouTube origin the CSP lets us frame (`frame-src` in vercel.json),
+ * and therefore also the postMessage peer for the watch-progress bridge.
+ */
+export const YOUTUBE_EMBED_ORIGIN = "https://www.youtube-nocookie.com";
+
 /**
  * Convert a YouTube link into a privacy-mode embed URL.
  *
@@ -52,7 +58,21 @@ export const shouldShowReleaseVideo = (
  */
 export const youtubeEmbedUrl = (videoUrl: string): string | null => {
 	const id = youtubeVideoId(videoUrl);
-	return id ? `https://www.youtube-nocookie.com/embed/${id}?rel=0` : null;
+	return id ? `${YOUTUBE_EMBED_ORIGIN}/embed/${id}?rel=0` : null;
+};
+
+/**
+ * Add the query params that make the embed talk back. `enablejsapi` switches
+ * on the player's widget postMessage protocol; `origin` names the parent
+ * window it may trust with it. No script loads and no new origin appears
+ * anywhere: the bridge is window.postMessage against the frame that is
+ * already there, which is what keeps the CSP and the nocookie posture intact.
+ */
+export const playerBridgeUrl = (embedUrl: string, origin: string): string => {
+	const url = new URL(embedUrl);
+	url.searchParams.set("enablejsapi", "1");
+	url.searchParams.set("origin", origin);
+	return url.toString();
 };
 
 const YOUTUBE_HOSTS = new Set([
diff --git a/echo/frontend/src/components/release/videoWatchTracker.test.ts b/echo/frontend/src/components/release/videoWatchTracker.test.ts
new file mode 100644
index 00000000..fe168daa
--- /dev/null
+++ b/echo/frontend/src/components/release/videoWatchTracker.test.ts
@@ -0,0 +1,172 @@
+import { describe, expect, it } from "vitest";
+import {
+	createWatchTracker,
+	PLAYER_STATE_ENDED,
+	PLAYER_STATE_PLAYING,
+	playerInfoFromMessage,
+	type WatchEvent,
+} from "./videoWatchTracker";
+
+const types = (events: WatchEvent[]) => events.map((event) => event.type);
+
+describe("the watch tracker", () => {
+	it("reports started once, on the first playing state", () => {
+		const tracker = createWatchTracker();
+		expect(
+			types(tracker.handleInfo({ playerState: PLAYER_STATE_PLAYING })),
+		).toEqual(["started"]);
+		expect(tracker.handleInfo({ playerState: PLAYER_STATE_PLAYING })).toEqual(
+			[],
+		);
+		expect(tracker.snapshot().started).toBe(true);
+	});
+
+	it("adds up playback ticks but never a seek", () => {
+		const tracker = createWatchTracker();
+		tracker.handleInfo({
+			currentTime: 0,
+			duration: 100,
+			playerState: PLAYER_STATE_PLAYING,
+		});
+		tracker.handleInfo({ currentTime: 0.5 });
+		tracker.handleInfo({ currentTime: 1.0 });
+		// A 40 second jump is a scrub, not 40 seconds of watching.
+		tracker.handleInfo({ currentTime: 41 });
+		tracker.handleInfo({ currentTime: 41.5 });
+
+		const snap = tracker.snapshot();
+		expect(snap.watchedSeconds).toBe(1.5);
+		// The seek still counts as ground covered.
+		expect(snap.maxPercent).toBe(42);
+	});
+
+	it("holds the playing state across deliveries that omit it", () => {
+		const tracker = createWatchTracker();
+		tracker.handleInfo({
+			currentTime: 0,
+			duration: 100,
+			playerState: PLAYER_STATE_PLAYING,
+		});
+		// The delta stream sends bare currentTime while playing.
+		tracker.handleInfo({ currentTime: 1 });
+		expect(tracker.snapshot().watchedSeconds).toBe(1);
+
+		// Paused: positions may still arrive (a scrub) but are not watching.
+		tracker.handleInfo({ currentTime: 10, playerState: 2 });
+		tracker.handleInfo({ currentTime: 11 });
+		expect(tracker.snapshot().watchedSeconds).toBe(1);
+	});
+
+	it("fires each milestone once as the furthest position crosses it", () => {
+		const tracker = createWatchTracker();
+		tracker.handleInfo({
+			currentTime: 0,
+			duration: 100,
+			playerState: PLAYER_STATE_PLAYING,
+		});
+
+		const atQuarter = tracker.handleInfo({ currentTime: 26 });
+		expect(atQuarter).toEqual([{ milestone: 25, type: "milestone" }]);
+
+		// Rewinding and passing 25% again does not refire it.
+		tracker.handleInfo({ currentTime: 1 });
+		expect(tracker.handleInfo({ currentTime: 27 })).toEqual([]);
+
+		const atEightyPercent = tracker.handleInfo({ currentTime: 80 });
+		expect(atEightyPercent).toEqual([
+			{ milestone: 50, type: "milestone" },
+			{ milestone: 75, type: "milestone" },
+		]);
+	});
+
+	it("treats ending as reaching the end, milestones and all", () => {
+		const tracker = createWatchTracker();
+		tracker.handleInfo({
+			currentTime: 0,
+			duration: 100,
+			playerState: PLAYER_STATE_PLAYING,
+		});
+		const finale = tracker.handleInfo({
+			currentTime: 99.4,
+			playerState: PLAYER_STATE_ENDED,
+		});
+		expect(types(finale)).toEqual([
+			"milestone",
+			"milestone",
+			"milestone",
+			"milestone",
+			"ended",
+		]);
+		const snap = tracker.snapshot();
+		expect(snap.ended).toBe(true);
+		expect(snap.maxPercent).toBe(100);
+	});
+
+	it("answers null percentages until the player has named a duration", () => {
+		const tracker = createWatchTracker();
+		tracker.handleInfo({ currentTime: 5, playerState: PLAYER_STATE_PLAYING });
+		const snap = tracker.snapshot();
+		expect(snap.percentWatched).toBeNull();
+		expect(snap.maxPercent).toBeNull();
+	});
+
+	it("caps percent watched at 100 when a section is rewatched", () => {
+		const tracker = createWatchTracker();
+		tracker.handleInfo({
+			currentTime: 0,
+			duration: 2,
+			playerState: PLAYER_STATE_PLAYING,
+		});
+		// Watch the two seconds, twice over.
+		tracker.handleInfo({ currentTime: 1 });
+		tracker.handleInfo({ currentTime: 2 });
+		tracker.handleInfo({ currentTime: 0.1 });
+		tracker.handleInfo({ currentTime: 1.1 });
+		tracker.handleInfo({ currentTime: 2.0 });
+		const snap = tracker.snapshot();
+		expect(snap.watchedSeconds).toBeGreaterThan(2);
+		expect(snap.percentWatched).toBe(100);
+	});
+});
+
+describe("reading widget messages", () => {
+	it("reads an infoDelivery", () => {
+		expect(
+			playerInfoFromMessage(
+				JSON.stringify({
+					event: "infoDelivery",
+					info: { currentTime: 3.2, duration: 90, playerState: 1 },
+				}),
+			),
+		).toEqual({ currentTime: 3.2, duration: 90, playerState: 1 });
+	});
+
+	it("reads an initialDelivery and drops fields of the wrong type", () => {
+		expect(
+			playerInfoFromMessage(
+				JSON.stringify({
+					event: "initialDelivery",
+					info: { currentTime: "soon", duration: 90 },
+				}),
+			),
+		).toEqual({ duration: 90 });
+	});
+
+	it("reads an onStateChange, whose info is the bare state number", () => {
+		expect(
+			playerInfoFromMessage(
+				JSON.stringify({ event: "onStateChange", info: 1 }),
+			),
+		).toEqual({ playerState: 1 });
+	});
+
+	it("ignores everything else", () => {
+		expect(playerInfoFromMessage(undefined)).toBeNull();
+		expect(playerInfoFromMessage({ event: "infoDelivery" })).toBeNull();
+		expect(playerInfoFromMessage("not json")).toBeNull();
+		expect(playerInfoFromMessage('"a json string"')).toBeNull();
+		expect(
+			playerInfoFromMessage(JSON.stringify({ event: "onReady" })),
+		).toBeNull();
+	});
+});
diff --git a/echo/frontend/src/components/release/videoWatchTracker.ts b/echo/frontend/src/components/release/videoWatchTracker.ts
new file mode 100644
index 00000000..8897ba39
--- /dev/null
+++ b/echo/frontend/src/components/release/videoWatchTracker.ts
@@ -0,0 +1,198 @@
+/**
+ * Watch-progress accounting for the release video, fed by the messages the
+ * YouTube embed already posts.
+ *
+ * With `enablejsapi=1` on the embed URL the player inside the frame speaks
+ * the widget postMessage protocol: after a `listening` handshake it sends
+ * `initialDelivery` and then streams `infoDelivery` carrying `currentTime`,
+ * `duration` and `playerState`. Listening to that stream is the whole
+ * integration. No YouTube script is loaded, no origin is added to the CSP,
+ * and the frame stays on www.youtube-nocookie.com. This is the deliberate
+ * alternative to the official IFrame API loader, which serves from
+ * www.youtube.com and is blocked by `script-src` (vercel.json) anyway.
+ *
+ * This module is the pure half: it turns player snapshots into the analytics
+ * events they imply. The modal owns the wiring (message listener, handshake,
+ * PostHog).
+ */
+
+/** Player states from the widget protocol, same values the IFrame API documents. */
+export const PLAYER_STATE_ENDED = 0;
+export const PLAYER_STATE_PLAYING = 1;
+
+/**
+ * Furthest-position marks that each earn a durable event. The close summary
+ * only exists if the tab survives to send it; a milestone sent at the moment
+ * it is crossed is what remains of a session that ends with the tab.
+ */
+export const MILESTONES = [25, 50, 75, 95] as const;
+
+/**
+ * Playback ticks arrive a few times a second, so consecutive `currentTime`
+ * readings differ by well under a second even at double speed. A gap above
+ * this is a seek, and a seek is not watching.
+ */
+const MAX_PLAYBACK_STEP_SECONDS = 3;
+
+/** The slice of a delivery message the tracker cares about. */
+export interface PlayerInfo {
+	currentTime?: number;
+	duration?: number;
+	playerState?: number;
+}
+
+export type WatchEvent =
+	| { type: "started" }
+	| { milestone: (typeof MILESTONES)[number]; type: "milestone" }
+	| { type: "ended" };
+
+export interface WatchSnapshot {
+	/** Total length the player reported, 0 until it has said. */
+	durationSeconds: number;
+	/** True once the player reported the ended state. */
+	ended: boolean;
+	/** Furthest position reached as a percentage, null without a duration. */
+	maxPercent: number | null;
+	/** Watched seconds over duration, capped at 100, null without a duration. */
+	percentWatched: number | null;
+	/** True once playback started at all. */
+	started: boolean;
+	/**
+	 * Content seconds actually played: the sum of small forward `currentTime`
+	 * steps. Seeks are skipped (the step is too large), rewatching counts
+	 * again, and double speed counts the content covered, not the wall clock.
+	 */
+	watchedSeconds: number;
+}
+
+export type WatchTracker = ReturnType<typeof createWatchTracker>;
+
+export const createWatchTracker = () => {
+	let duration = 0;
+	let ended = false;
+	let lastTime: number | null = null;
+	let maxPosition = 0;
+	let playing = false;
+	let started = false;
+	let watched = 0;
+	const milestonesReached = new Set<number>();
+
+	const handleInfo = (info: PlayerInfo): WatchEvent[] => {
+		const events: WatchEvent[] = [];
+		let justEnded = false;
+
+		if (typeof info.duration === "number" && info.duration > 0) {
+			duration = info.duration;
+		}
+
+		// Most deliveries carry no playerState (the stream sends deltas), so
+		// `playing` holds its last value until a message says otherwise.
+		if (typeof info.playerState === "number") {
+			if (info.playerState === PLAYER_STATE_PLAYING && !started) {
+				started = true;
+				events.push({ type: "started" });
+			}
+			if (info.playerState === PLAYER_STATE_ENDED && !ended) {
+				ended = true;
+				justEnded = true;
+				// The last delivery can stop just short of the end; ending IS
+				// reaching the end, so the milestones below all settle.
+				if (duration > 0) {
+					maxPosition = duration;
+				}
+			}
+			playing = info.playerState === PLAYER_STATE_PLAYING;
+			if (!playing) {
+				lastTime = null;
+			}
+		}
+
+		if (typeof info.currentTime === "number") {
+			if (playing) {
+				if (lastTime !== null) {
+					const step = info.currentTime - lastTime;
+					if (step > 0 && step <= MAX_PLAYBACK_STEP_SECONDS) {
+						watched += step;
+					}
+				}
+				lastTime = info.currentTime;
+			}
+			if (info.currentTime > maxPosition) {
+				maxPosition = info.currentTime;
+			}
+		}
+
+		if (duration > 0) {
+			const percent = (maxPosition / duration) * 100;
+			for (const milestone of MILESTONES) {
+				if (percent >= milestone && !milestonesReached.has(milestone)) {
+					milestonesReached.add(milestone);
+					events.push({ milestone, type: "milestone" });
+				}
+			}
+		}
+
+		// Ordered after the milestones so an ended video reports 95 before done.
+		if (justEnded) {
+			events.push({ type: "ended" });
+		}
+
+		return events;
+	};
+
+	const snapshot = (): WatchSnapshot => ({
+		durationSeconds: roundTenth(duration),
+		ended,
+		maxPercent:
+			duration > 0
+				? Math.min(100, Math.round((maxPosition / duration) * 100))
+				: null,
+		percentWatched:
+			duration > 0
+				? Math.min(100, Math.round((watched / duration) * 100))
+				: null,
+		started,
+		watchedSeconds: roundTenth(watched),
+	});
+
+	return { handleInfo, snapshot };
+};
+
+const roundTenth = (value: number): number => Math.round(value * 10) / 10;
+
+/**
+ * Read a widget message into a PlayerInfo, or null when the message is not
+ * one of ours. The widget posts JSON strings; `infoDelivery` and
+ * `initialDelivery` carry the info object, `onStateChange` carries the state
+ * number alone. Anything else (onReady, foreign frames, junk) is ignored.
+ */
+export const playerInfoFromMessage = (data: unknown): PlayerInfo | null => {
+	if (typeof data !== "string") return null;
+	let parsed: unknown;
+	try {
+		parsed = JSON.parse(data);
+	} catch {
+		return null;
+	}
+	if (typeof parsed !== "object" || parsed === null) return null;
+	const message = parsed as { event?: unknown; info?: unknown };
+
+	if (
+		(message.event === "infoDelivery" || message.event === "initialDelivery") &&
+		typeof message.info === "object" &&
+		message.info !== null
+	) {
+		const raw = message.info as Record<string, unknown>;
+		const info: PlayerInfo = {};
+		if (typeof raw.currentTime === "number") info.currentTime = raw.currentTime;
+		if (typeof raw.duration === "number") info.duration = raw.duration;
+		if (typeof raw.playerState === "number") info.playerState = raw.playerState;
+		return info;
+	}
+
+	if (message.event === "onStateChange" && typeof message.info === "number") {
+		return { playerState: message.info };
+	}
+
+	return null;
+};
diff --git a/echo/frontend/src/locales/cs-CZ.po b/echo/frontend/src/locales/cs-CZ.po
index 3e2b070a..e861f3f6 100644
--- a/echo/frontend/src/locales/cs-CZ.po
+++ b/echo/frontend/src/locales/cs-CZ.po
@@ -2387,7 +2387,7 @@ msgstr "Close"
 msgid "select.all.modal.close"
 msgstr "Close"
 
-#: src/components/release/ReleaseVideoModal.tsx:142
+#: src/components/release/ReleaseVideoModal.tsx:326
 msgid "Close and go to dembrane"
 msgstr ""
 
@@ -7968,7 +7968,7 @@ msgstr "Regenerating the summary. Please wait..."
 msgid "Register | dembrane"
 msgstr "Register | dembrane"
 
-#: src/components/release/ReleaseVideoModal.tsx:156
+#: src/components/release/ReleaseVideoModal.tsx:341
 msgid "Release video"
 msgstr ""
 
diff --git a/echo/frontend/src/locales/de-DE.po b/echo/frontend/src/locales/de-DE.po
index d502e873..d689f6f9 100644
--- a/echo/frontend/src/locales/de-DE.po
+++ b/echo/frontend/src/locales/de-DE.po
@@ -2388,7 +2388,7 @@ msgstr "Schließen"
 msgid "select.all.modal.close"
 msgstr "Schließen"
 
-#: src/components/release/ReleaseVideoModal.tsx:142
+#: src/components/release/ReleaseVideoModal.tsx:326
 msgid "Close and go to dembrane"
 msgstr ""
 
@@ -7969,7 +7969,7 @@ msgstr "Zusammenfassung wird neu erstellt. Kurz warten ..."
 msgid "Register | dembrane"
 msgstr "Registrieren | dembrane"
 
-#: src/components/release/ReleaseVideoModal.tsx:156
+#: src/components/release/ReleaseVideoModal.tsx:341
 msgid "Release video"
 msgstr ""
 
diff --git a/echo/frontend/src/locales/en-US.po b/echo/frontend/src/locales/en-US.po
index 147c0d65..09214fe4 100644
--- a/echo/frontend/src/locales/en-US.po
+++ b/echo/frontend/src/locales/en-US.po
@@ -2387,7 +2387,7 @@ msgstr "Close"
 msgid "select.all.modal.close"
 msgstr "Close"
 
-#: src/components/release/ReleaseVideoModal.tsx:142
+#: src/components/release/ReleaseVideoModal.tsx:326
 msgid "Close and go to dembrane"
 msgstr "Close and go to dembrane"
 
@@ -7968,7 +7968,7 @@ msgstr "Regenerating the summary. Please wait..."
 msgid "Register | dembrane"
 msgstr "Register | dembrane"
 
-#: src/components/release/ReleaseVideoModal.tsx:156
+#: src/components/release/ReleaseVideoModal.tsx:341
 msgid "Release video"
 msgstr "Release video"
 
diff --git a/echo/frontend/src/locales/es-ES.po b/echo/frontend/src/locales/es-ES.po
index 76a62a94..a1a308ba 100644
--- a/echo/frontend/src/locales/es-ES.po
+++ b/echo/frontend/src/locales/es-ES.po
@@ -2388,7 +2388,7 @@ msgstr "Cerrar"
 msgid "select.all.modal.close"
 msgstr "Cerrar"
 
-#: src/components/release/ReleaseVideoModal.tsx:142
+#: src/components/release/ReleaseVideoModal.tsx:326
 msgid "Close and go to dembrane"
 msgstr ""
 
@@ -7969,7 +7969,7 @@ msgstr "Regenerando el resumen. Espera..."
 msgid "Register | dembrane"
 msgstr "Registrar | dembrane"
 
-#: src/components/release/ReleaseVideoModal.tsx:156
+#: src/components/release/ReleaseVideoModal.tsx:341
 msgid "Release video"
 msgstr ""
 
diff --git a/echo/frontend/src/locales/fr-FR.po b/echo/frontend/src/locales/fr-FR.po
index e3f08a2a..71ab9788 100644
--- a/echo/frontend/src/locales/fr-FR.po
+++ b/echo/frontend/src/locales/fr-FR.po
@@ -2388,7 +2388,7 @@ msgstr "Fermer"
 msgid "select.all.modal.close"
 msgstr "Fermer"
 
-#: src/components/release/ReleaseVideoModal.tsx:142
+#: src/components/release/ReleaseVideoModal.tsx:326
 msgid "Close and go to dembrane"
 msgstr ""
 
@@ -7969,7 +7969,7 @@ msgstr "Régénération du résumé. Patiente un peu..."
 msgid "Register | dembrane"
 msgstr "S'enregistrer | dembrane"
 
-#: src/components/release/ReleaseVideoModal.tsx:156
+#: src/components/release/ReleaseVideoModal.tsx:341
 msgid "Release video"
 msgstr ""
 
diff --git a/echo/frontend/src/locales/it-IT.po b/echo/frontend/src/locales/it-IT.po
index c0b2758b..aab8b80a 100644
--- a/echo/frontend/src/locales/it-IT.po
+++ b/echo/frontend/src/locales/it-IT.po
@@ -2387,7 +2387,7 @@ msgstr "Close"
 msgid "select.all.modal.close"
 msgstr "Close"
 
-#: src/components/release/ReleaseVideoModal.tsx:142
+#: src/components/release/ReleaseVideoModal.tsx:326
 msgid "Close and go to dembrane"
 msgstr ""
 
@@ -7968,7 +7968,7 @@ msgstr "Regenerating the summary. Please wait..."
 msgid "Register | dembrane"
 msgstr "Register | dembrane"
 
-#: src/components/release/ReleaseVideoModal.tsx:156
+#: src/components/release/ReleaseVideoModal.tsx:341
 msgid "Release video"
 msgstr ""
 
diff --git a/echo/frontend/src/locales/nl-NL.po b/echo/frontend/src/locales/nl-NL.po
index 543a64e0..bec25eff 100644
--- a/echo/frontend/src/locales/nl-NL.po
+++ b/echo/frontend/src/locales/nl-NL.po
@@ -2385,7 +2385,7 @@ msgstr "Sluiten"
 msgid "select.all.modal.close"
 msgstr "Sluiten"
 
-#: src/components/release/ReleaseVideoModal.tsx:142
+#: src/components/release/ReleaseVideoModal.tsx:326
 msgid "Close and go to dembrane"
 msgstr "Sluiten en naar dembrane"
 
@@ -7966,7 +7966,7 @@ msgstr "Samenvatting wordt opnieuw gemaakt. Even wachten..."
 msgid "Register | dembrane"
 msgstr "Registreer | dembrane"
 
-#: src/components/release/ReleaseVideoModal.tsx:156
+#: src/components/release/ReleaseVideoModal.tsx:341
 msgid "Release video"
 msgstr "Releasevideo"
 
diff --git a/echo/frontend/src/locales/uk-UA.po b/echo/frontend/src/locales/uk-UA.po
index 01d1da5c..db06ae6e 100644
--- a/echo/frontend/src/locales/uk-UA.po
+++ b/echo/frontend/src/locales/uk-UA.po
@@ -2387,7 +2387,7 @@ msgstr "Close"
 msgid "select.all.modal.close"
 msgstr "Close"
 
-#: src/components/release/ReleaseVideoModal.tsx:142
+#: src/components/release/ReleaseVideoModal.tsx:326
 msgid "Close and go to dembrane"
 msgstr ""
 
@@ -7968,7 +7968,7 @@ msgstr "Regenerating the summary. Please wait..."
 msgid "Register | dembrane"
 msgstr "Register | dembrane"
 
-#: src/components/release/ReleaseVideoModal.tsx:156
+#: src/components/release/ReleaseVideoModal.tsx:341
 msgid "Release video"
 msgstr ""