From dc531411a4bb32a5a8d9aea999770e1be26049fa Mon Sep 17 00:00:00 2001
From: Abraham <anubra266@gmail.com>
Date: Tue, 16 Jun 2026 16:47:20 -0700
Subject: [PATCH] fix(embed): rewrite video-host watch URLs to embeddable form
 (#1901)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(embed): rewrite video-host watch URLs to embeddable form

The `<Embed>` iframe failed for YouTube / Vimeo / Loom because the
user-facing URLs (`youtube.com/watch?v=…`, `vimeo.com/<id>`,
`loom.com/share/<id>`) all refuse to be framed via `X-Frame-Options:
SAMEORIGIN`. Agents picked `<Embed>` over `<video>` (the canonical
shape) and shipped blank panes; authors who pasted the URL bar's
copy hit the same wall.

Three coordinated changes:

1. `rewriteEmbedUrl` helper in core — maps watch/share URLs to their
   frame-embeddable counterparts (YouTube `/watch?v=ID` → `/embed/ID`,
   Vimeo `/ID` → `player.vimeo.com/video/ID`, Loom `/share/ID` →
   `/embed/ID`). Preserves timestamps + nocookie host; returns input
   unchanged for everything else (non-video URLs, malformed input,
   non-http(s) schemes — the existing scheme gate still owns those).
   20 unit tests covering every recognized shape + passthrough.

2. `<Embed>` calls the rewriter before the iframe `src`. The
   descriptor's `src` prop still holds the original URL; only the
   in-flight iframe `src` changes, so markdown round-trip is
   untouched. When the rewriter changed the URL we also switch
   `referrerPolicy` from `no-referrer` to `strict-origin-when-cross-origin`
   so YouTube's embed allowlist accepts the iframe (otherwise it
   returns "Error 153 — Video player configuration error"). The
   hash-routed editor path is still stripped from `Referer` by spec
   so the doc path doesn't leak. Mirrors what `react-lite-youtube-embed`
   does inside the `<video>` block.

3. `Embed` descriptor `description` now steers agents toward
   `<video src="…">` for YouTube / Vimeo / Loom URLs (it routes
   through the lite-embed facade, handles autoplay heuristics, and
   exposes player props). `<Embed>` still works for video URLs via
   the auto-rewrite; the steering nudges the canonical shape without
   leaving the non-canonical path broken.

* chore(inventory-footer): bump budget to 3.5KB for the Embed→video steer

The PRD-7069 fix added Embed→video-block routing guidance to the
`Embed` descriptor's description so agents prefer `<video>` over
`<Embed>` for YouTube/Vimeo/Loom URLs. The widening pushed the
projected inventory footer from ~3K to ~3.2K — over the 3072-byte
test budget. Raise to 3584 (matches the existing comment shape
that allowed the fenced-code-block guidance).

The inventory footer is unbounded read-once data the agent ingests
when authoring; an extra ~400 bytes for the new routing rule is
in proportion to the user-facing payoff.

GitOrigin-RevId: 285bcd2a4f0f8ce58479a9de87b0a4294d43211a
---
 packages/app/src/editor/components/Embed.tsx  |   8 +-
 packages/core/src/index.ts                    |   1 +
 packages/core/src/registry/built-ins.ts       |   3 +-
 packages/core/src/registry/projection.test.ts |   4 +-
 .../core/src/utils/embed-url-rewrite.test.ts  | 130 ++++++++++++++++++
 packages/core/src/utils/embed-url-rewrite.ts  |  46 +++++++
 6 files changed, 187 insertions(+), 5 deletions(-)
 create mode 100644 packages/core/src/utils/embed-url-rewrite.test.ts
 create mode 100644 packages/core/src/utils/embed-url-rewrite.ts

diff --git a/packages/app/src/editor/components/Embed.tsx b/packages/app/src/editor/components/Embed.tsx
index c87bac8e..0067ebe8 100644
--- a/packages/app/src/editor/components/Embed.tsx
+++ b/packages/app/src/editor/components/Embed.tsx
@@ -1,3 +1,4 @@
+import { rewriteEmbedUrl } from '@inkeep/open-knowledge-core';
 import { useEffect, useRef } from 'react';
 import { useJsxComponentHost } from './jsx-host-context.tsx';
 import { ResizeHandles } from './ResizeHandles.tsx';
@@ -87,13 +88,16 @@ export function Embed({ src, title, width, height }: EmbedProps) {
     }
   };
 
+  const iframeSrc = rewriteEmbedUrl(src);
+  const referrerPolicy = iframeSrc !== src ? 'strict-origin-when-cross-origin' : 'no-referrer';
+
   return (
     <div className="ok-embed" style={initialStyle} ref={wrapperRef} contentEditable={false}>
       <iframe
         title={title || DEFAULT_TITLE}
-        src={src}
+        src={iframeSrc}
         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"
-        referrerPolicy="no-referrer"
+        referrerPolicy={referrerPolicy}
         loading="lazy"
         className="ok-embed-frame"
       />
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 6f098aae..610619f6 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -917,6 +917,7 @@ export { applyByPrefixSuffix } from './utils/apply-by-prefix-suffix.ts';
 export { toDesktopAssetHref } from './utils/asset-href.ts';
 export { ChunkedInsertError, chunkedYTextInsert } from './utils/chunked-insert.ts';
 export { createCodeFenceTracker } from './utils/code-fence-tracker.ts';
+export { isEmbedUrlRewritable, rewriteEmbedUrl } from './utils/embed-url-rewrite.ts';
 export { extensionOf } from './utils/extension.ts';
 export { formatFileSize } from './utils/file-size.ts';
 export {
diff --git a/packages/core/src/registry/built-ins.ts b/packages/core/src/registry/built-ins.ts
index 221ea56a..0773009b 100644
--- a/packages/core/src/registry/built-ins.ts
+++ b/packages/core/src/registry/built-ins.ts
@@ -779,7 +779,8 @@ export const builtInComponents: JsxComponentMeta[] = [
     icon: 'AppWindow',
     category: 'media',
     displayName: 'Embed',
-    description: 'Inline web embed (iframe) — drop a URL, get a resizable preview pane',
+    description:
+      'Inline web embed (iframe) — drop a URL, get a resizable preview pane. For YouTube / Vimeo / Loom prefer `<video src="…">` (player props, click-facade); `<Embed>` auto-rewrites watch URLs as a fallback.',
     searchTerms: ['embed', 'iframe', 'website', 'page', 'inline', 'frame', 'preview'],
     placeholder: { label: 'Embed a URL' },
     serialize: (node, ctx) => emitMdxJsx('Embed', node, ctx, embedProps),
diff --git a/packages/core/src/registry/projection.test.ts b/packages/core/src/registry/projection.test.ts
index dc229972..fadc5d5e 100644
--- a/packages/core/src/registry/projection.test.ts
+++ b/packages/core/src/registry/projection.test.ts
@@ -174,9 +174,9 @@ describe('renderInventoryFooter (FR-1)', () => {
     expect(text).toContain('<TagName>');
   });
 
-  test('stays under 3KB at N=11 (NFR performance bound — extra ~600 bytes covers the fenced-code-block authoring guidance)', () => {
+  test('stays under 3.5KB at N=11 (NFR performance bound — extra ~600 bytes covers the fenced-code-block authoring guidance + the Embed→video-block steer for YouTube/Vimeo/Loom URLs added per PRD-7069)', () => {
     const text = renderInventoryFooter();
-    expect(text.length).toBeLessThan(3072);
+    expect(text.length).toBeLessThan(3584);
   });
 
   test('mentions the `html preview` fence affordance for interactive content', () => {
diff --git a/packages/core/src/utils/embed-url-rewrite.test.ts b/packages/core/src/utils/embed-url-rewrite.test.ts
new file mode 100644
index 00000000..5e3bde32
--- /dev/null
+++ b/packages/core/src/utils/embed-url-rewrite.test.ts
@@ -0,0 +1,130 @@
+import { describe, expect, test } from 'bun:test';
+import { isEmbedUrlRewritable, rewriteEmbedUrl } from './embed-url-rewrite.ts';
+
+describe('rewriteEmbedUrl — YouTube', () => {
+  test('youtube.com/watch?v=ID → /embed/ID', () => {
+    expect(rewriteEmbedUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toBe(
+      'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    );
+  });
+
+  test('youtu.be/ID short link → /embed/ID', () => {
+    expect(rewriteEmbedUrl('https://youtu.be/dQw4w9WgXcQ')).toBe(
+      'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    );
+  });
+
+  test('youtube.com/shorts/ID → /embed/ID', () => {
+    expect(rewriteEmbedUrl('https://www.youtube.com/shorts/dQw4w9WgXcQ')).toBe(
+      'https://www.youtube.com/embed/dQw4w9WgXcQ',
+    );
+  });
+
+  test('youtube-nocookie.com/watch?v=ID → nocookie embed', () => {
+    expect(rewriteEmbedUrl('https://www.youtube-nocookie.com/watch?v=dQw4w9WgXcQ')).toBe(
+      'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ',
+    );
+  });
+
+  test('?t=42 timestamp → ?start=42 on embed', () => {
+    expect(rewriteEmbedUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=42')).toBe(
+      'https://www.youtube.com/embed/dQw4w9WgXcQ?start=42',
+    );
+  });
+
+  test('youtu.be/ID?t=2m30s → ?start=150', () => {
+    expect(rewriteEmbedUrl('https://youtu.be/dQw4w9WgXcQ?t=2m30s')).toBe(
+      'https://www.youtube.com/embed/dQw4w9WgXcQ?start=150',
+    );
+  });
+});
+
+describe('rewriteEmbedUrl — Vimeo', () => {
+  test('vimeo.com/ID → player.vimeo.com/video/ID', () => {
+    expect(rewriteEmbedUrl('https://vimeo.com/123456789')).toBe(
+      'https://player.vimeo.com/video/123456789',
+    );
+  });
+
+  test('www.vimeo.com/ID → player.vimeo.com/video/ID', () => {
+    expect(rewriteEmbedUrl('https://www.vimeo.com/123456789')).toBe(
+      'https://player.vimeo.com/video/123456789',
+    );
+  });
+
+  test('vimeo.com/<id>/<hash> unlisted-link form → player.vimeo.com/video/<id>', () => {
+    expect(rewriteEmbedUrl('https://vimeo.com/123456789/abc123')).toBe(
+      'https://player.vimeo.com/video/123456789',
+    );
+  });
+
+  test('player.vimeo.com/video/ID (already embed) → unchanged', () => {
+    expect(rewriteEmbedUrl('https://player.vimeo.com/video/123456789')).toBe(
+      'https://player.vimeo.com/video/123456789',
+    );
+  });
+
+  test('vimeo.com/channels/foo (no ID) → unchanged', () => {
+    const channelUrl = 'https://vimeo.com/channels/staffpicks';
+    expect(rewriteEmbedUrl(channelUrl)).toBe(channelUrl);
+  });
+});
+
+describe('rewriteEmbedUrl — Loom', () => {
+  test('loom.com/share/ID → /embed/ID', () => {
+    expect(rewriteEmbedUrl('https://www.loom.com/share/abcdef0123456789abcdef0123456789')).toBe(
+      'https://www.loom.com/embed/abcdef0123456789abcdef0123456789',
+    );
+  });
+
+  test('loom.com/share/ID?t=42 → /embed/ID?t=42', () => {
+    expect(
+      rewriteEmbedUrl('https://www.loom.com/share/abcdef0123456789abcdef0123456789?t=42'),
+    ).toBe('https://www.loom.com/embed/abcdef0123456789abcdef0123456789?t=42');
+  });
+});
+
+describe('rewriteEmbedUrl — passthrough', () => {
+  test('arbitrary https URL → unchanged', () => {
+    expect(rewriteEmbedUrl('https://example.com/page')).toBe('https://example.com/page');
+  });
+
+  test('codesandbox / figma / etc. → unchanged', () => {
+    expect(rewriteEmbedUrl('https://codesandbox.io/s/abc')).toBe('https://codesandbox.io/s/abc');
+    expect(rewriteEmbedUrl('https://www.figma.com/embed?embed_host=share&url=...')).toBe(
+      'https://www.figma.com/embed?embed_host=share&url=...',
+    );
+  });
+
+  test('empty string → unchanged', () => {
+    expect(rewriteEmbedUrl('')).toBe('');
+  });
+
+  test('malformed URL → unchanged', () => {
+    expect(rewriteEmbedUrl('not a url at all')).toBe('not a url at all');
+  });
+
+  test('javascript: / data: schemes → unchanged (caller still gates on scheme)', () => {
+    expect(rewriteEmbedUrl('javascript:alert(1)')).toBe('javascript:alert(1)');
+    expect(rewriteEmbedUrl('data:text/html,<script>')).toBe('data:text/html,<script>');
+  });
+});
+
+describe('isEmbedUrlRewritable', () => {
+  test('returns true when the URL would actually change', () => {
+    expect(isEmbedUrlRewritable('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toBe(true);
+    expect(isEmbedUrlRewritable('https://vimeo.com/123456789')).toBe(true);
+    expect(
+      isEmbedUrlRewritable('https://www.loom.com/share/abcdef0123456789abcdef0123456789'),
+    ).toBe(true);
+  });
+
+  test('returns false when the URL is already in embed form or not a known host', () => {
+    expect(isEmbedUrlRewritable('https://www.youtube.com/embed/dQw4w9WgXcQ')).toBe(false);
+    expect(isEmbedUrlRewritable('https://player.vimeo.com/video/123456789')).toBe(false);
+    expect(
+      isEmbedUrlRewritable('https://www.loom.com/embed/abcdef0123456789abcdef0123456789'),
+    ).toBe(false);
+    expect(isEmbedUrlRewritable('https://example.com/anything')).toBe(false);
+  });
+});
diff --git a/packages/core/src/utils/embed-url-rewrite.ts b/packages/core/src/utils/embed-url-rewrite.ts
new file mode 100644
index 00000000..b3a4fdd4
--- /dev/null
+++ b/packages/core/src/utils/embed-url-rewrite.ts
@@ -0,0 +1,46 @@
+import { parseLoomUrl } from './loom-embed.ts';
+import { isVimeoUrl } from './vimeo-embed.ts';
+import { parseYouTubeUrl } from './youtube-embed.ts';
+
+function extractVimeoVideoId(rawUrl: string): string | null {
+  let url: URL;
+  try {
+    url = new URL(rawUrl);
+  } catch {
+    return null;
+  }
+  const playerMatch = url.pathname.match(/^\/video\/(\d+)/);
+  if (playerMatch) return playerMatch[1] ?? null;
+  const canonicalMatch = url.pathname.match(/^\/(\d+)/);
+  if (canonicalMatch) return canonicalMatch[1] ?? null;
+  return null;
+}
+
+export function rewriteEmbedUrl(src: string | undefined): string | undefined {
+  if (typeof src !== 'string' || src.length === 0) return src;
+
+  const yt = parseYouTubeUrl(src);
+  if (yt) {
+    const host = yt.noCookie ? 'www.youtube-nocookie.com' : 'www.youtube.com';
+    const query = yt.startSeconds !== null ? `?start=${yt.startSeconds}` : '';
+    return `https://${host}/embed/${yt.id}${query}`;
+  }
+
+  if (isVimeoUrl(src)) {
+    const id = extractVimeoVideoId(src);
+    if (id) return `https://player.vimeo.com/video/${id}`;
+    return src;
+  }
+
+  const loom = parseLoomUrl(src);
+  if (loom) {
+    const query = loom.startRaw !== null ? `?t=${loom.startRaw}` : '';
+    return `https://www.loom.com/embed/${loom.id}${query}`;
+  }
+
+  return src;
+}
+
+export function isEmbedUrlRewritable(src: string): boolean {
+  return rewriteEmbedUrl(src) !== src;
+}