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

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"
       />

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 {

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),

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', () => {

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);
+  });
+});

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;
+}