fix(import): route YouTube iframes and <video> elements to the base.video module (CoreBunch#151)

DavidBabinec · claude · web-flow · commit f139d3cab02d · 2026-07-02T10:48:55.000+02:00
* fix(import): route YouTube iframes and <video> elements to the base.video module YouTube <iframe> embeds and <video> elements imported via paste-HTML, Super Import, or the AI agent's site_insert_html tool previously fell through to the catch-all rule as base.container nodes. base.container declares no CSP sources, so YouTube iframes stayed blocked by the published page's frame-src 'none' even after PR CoreBunch#141 (which only fires when base.video renders). New rules added to HTML_TO_MODULE_RULES in src/core/htmlImport/rules.ts: - iframe: YouTube host check (youtube.com/m.youtube.com/youtube-nocookie.com/ youtu.be) maps to base.video; any other iframe falls back to base.container with tag:'custom',customTag:'iframe' so Vimeo, Maps, and arbitrary embeds keep working. rel=0 in the embed URL sets noRelatedVideos:true; playsinline=1 sets playsinline:true; the title attribute maps to the title prop. - video: maps to base.video with videoUrl from <video src> or the first <source src> child, and all boolean attributes (controls, autoplay, loop, muted, playsinline). recurse:false so <source> children are consumed, not emitted as extra nodes. Inline YouTube host detection in rules.ts — src/core/ must not import from src/modules/, so parseYoutubeId from src/modules/base/video/youtube.ts is not imported. The importer only needs host-level detection to decide the module; base.video's render() re-parses the stored videoUrl at publish time. base.video (src/modules/base/video/) extended with two new props: - title (default: 'YouTube video') — used as the iframe title attribute, replacing the previous hardcoded string. Improves accessibility. - noRelatedVideos (default: false) — appends rel=0 to the YouTube embed URL to suppress recommended videos. youtubeEmbedUrl() updated to build the query string from autoplay and noRelatedVideos together. VideoEditor.tsx wired up. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore: restore docs files accidentally staged from prior branch The chore/gitignore-superpowers branch had these files staged for deletion. When switching to fix/import-video-embeds-to-base-video the staged index was inherited and the previous commit swept them in unintentionally. Restore them from origin/main to keep this PR scope clean. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/src/__tests__/base-modules.test.ts b/src/__tests__/base-modules.test.ts
@@ -891,15 +891,17 @@ describe('base.svg — render() specifics', () => {
 // ---------------------------------------------------------------------------
 
 describe('base.video — render() specifics', () => {
-  it('exposes the v4 schema (single videoUrl, playback, poster, perf hints)', () => {
+  it('exposes the v4 schema (single videoUrl, playback, poster, perf hints, title, noRelatedVideos)', () => {
     expect(Object.keys(VideoModule.schema).sort()).toEqual([
       'autoplay',
       'controls',
       'loop',
       'muted',
+      'noRelatedVideos',
       'playsinline',
       'poster',
       'preload',
+      'title',
       'videoUrl',
     ])
   })
@@ -1042,6 +1044,51 @@ describe('base.video — render() specifics', () => {
     const out = renderModule(VideoModule, { videoUrl: '' })
     expect(out.cspSources).toBeUndefined()
   })
+
+  // --- title prop ---
+
+  it('title prop is used as the iframe title attribute for YouTube embeds', () => {
+    const { html } = renderModule(VideoModule, {
+      videoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      title: 'Rick Astley Never Gonna Give You Up',
+    })
+    expect(html).toContain('title="Rick Astley Never Gonna Give You Up"')
+    expect(html).not.toContain('title="YouTube video"')
+  })
+
+  it('title prop defaults to "YouTube video" when not set', () => {
+    const { html } = renderModule(VideoModule, {
+      videoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    })
+    expect(html).toContain('title="YouTube video"')
+  })
+
+  // --- noRelatedVideos prop ---
+
+  it('noRelatedVideos: true appends rel=0 to the YouTube embed URL', () => {
+    const { html } = renderModule(VideoModule, {
+      videoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      noRelatedVideos: true,
+    })
+    expect(html).toMatch(/youtube\.com\/embed\/dQw4w9WgXcQ[^"]*rel=0/)
+  })
+
+  it('noRelatedVideos: false (default) does NOT add rel=0', () => {
+    const { html } = renderModule(VideoModule, {
+      videoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    })
+    expect(html).not.toContain('rel=0')
+  })
+
+  it('noRelatedVideos still declares cspSources for frame-src YouTube', () => {
+    const out = renderModule(VideoModule, {
+      videoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      noRelatedVideos: true,
+    })
+    const frameSrc = out.cspSources?.find((r) => r.directive === 'frame-src')
+    expect(frameSrc?.sources).toContain('https://www.youtube.com')
+    expect(frameSrc?.sources).toContain('https://www.youtube-nocookie.com')
+  })
 })
 
 // ---------------------------------------------------------------------------
diff --git a/src/__tests__/htmlImport/mapping.test.ts b/src/__tests__/htmlImport/mapping.test.ts
@@ -1311,7 +1311,132 @@ describe('base.loop — <instatic-loop>', () => {
 })
 
 // ---------------------------------------------------------------------------
-// 13. Empty input and edge cases
+// 13. iframe and video → base.video mapping
+// ---------------------------------------------------------------------------
+
+describe('base.video — <iframe> import mapping', () => {
+  it('YouTube embed URL → base.video with videoUrl set', () => {
+    const node = single('<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.videoUrl).toBe('https://www.youtube.com/embed/dQw4w9WgXcQ')
+  })
+
+  it('YouTube watch URL in iframe src → base.video', () => {
+    const node = single('<iframe src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></iframe>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.videoUrl).toBe('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
+  })
+
+  it('youtube-nocookie.com embed → base.video', () => {
+    const node = single('<iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"></iframe>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.videoUrl).toBe('https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ')
+  })
+
+  it('iframe with title attr → title prop propagated to base.video', () => {
+    const node = single('<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="My Demo Video"></iframe>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.title).toBe('My Demo Video')
+  })
+
+  it('rel=0 in embed URL → noRelatedVideos true', () => {
+    const node = single('<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0"></iframe>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.noRelatedVideos).toBe(true)
+  })
+
+  it('playsinline=1 in embed URL → playsinline true', () => {
+    const node = single('<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?playsinline=1"></iframe>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.playsinline).toBe(true)
+  })
+
+  it('full-featured embed iframe → all mapped props', () => {
+    const node = single(
+      '<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&playsinline=1" title="Full Demo"></iframe>',
+    )
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.videoUrl).toBe('https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&playsinline=1')
+    expect(node.props.title).toBe('Full Demo')
+    expect(node.props.noRelatedVideos).toBe(true)
+    expect(node.props.playsinline).toBe(true)
+  })
+
+  it('Vimeo iframe → falls back to base.container (not base.video)', () => {
+    const node = single('<iframe src="https://player.vimeo.com/video/123456789"></iframe>')
+    expect(node.moduleId).toBe('base.container')
+    expect(node.props.tag).toBe('custom')
+    expect(node.props.customTag).toBe('iframe')
+  })
+
+  it('Google Maps iframe → falls back to base.container', () => {
+    const node = single('<iframe src="https://maps.google.com/maps?q=London"></iframe>')
+    expect(node.moduleId).toBe('base.container')
+    expect(node.props.customTag).toBe('iframe')
+  })
+
+  it('arbitrary iframe → falls back to base.container (no moduleId base.video)', () => {
+    const node = single('<iframe src="https://example.com/form"></iframe>')
+    expect(node.moduleId).toBe('base.container')
+    expect(node.props.customTag).toBe('iframe')
+  })
+
+  it('YouTube iframe produces no children (recurse: false)', () => {
+    // iframes have no meaningful DOM children to recurse into
+    const node = single('<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>')
+    expect(node.children).toHaveLength(0)
+  })
+})
+
+describe('base.video — <video> import mapping', () => {
+  it('<video src="..."> → base.video with videoUrl from src attr', () => {
+    const node = single('<video src="clip.mp4"></video>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.videoUrl).toBe('clip.mp4')
+  })
+
+  it('<video controls loop> → base.video with controls and loop true', () => {
+    const node = single('<video src="clip.mp4" controls loop></video>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.controls).toBe(true)
+    expect(node.props.loop).toBe(true)
+  })
+
+  it('<video autoplay muted playsinline> → all boolean attrs mapped', () => {
+    const node = single('<video src="clip.mp4" autoplay muted playsinline></video>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.autoplay).toBe(true)
+    expect(node.props.muted).toBe(true)
+    expect(node.props.playsinline).toBe(true)
+  })
+
+  it('<video> without controls attr → controls false', () => {
+    const node = single('<video src="clip.mp4"></video>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.controls).toBe(false)
+  })
+
+  it('<video><source src="..."></video> → videoUrl from first source child', () => {
+    const node = single('<video><source src="clip.mp4" type="video/mp4"></video>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.videoUrl).toBe('clip.mp4')
+  })
+
+  it('<video> with both src and source → prefers src attr', () => {
+    const node = single('<video src="direct.mp4"><source src="fallback.webm"></video>')
+    expect(node.moduleId).toBe('base.video')
+    expect(node.props.videoUrl).toBe('direct.mp4')
+  })
+
+  it('<video> produces no children (recurse: false)', () => {
+    // <source> children are consumed by the rule, not emitted as nodes
+    const node = single('<video><source src="clip.mp4"></video>')
+    expect(node.children).toHaveLength(0)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// 14. Empty input and edge cases
 // ---------------------------------------------------------------------------
 
 describe('edge cases', () => {
diff --git a/src/core/htmlImport/rules.ts b/src/core/htmlImport/rules.ts
@@ -455,6 +455,95 @@ export const HTML_TO_MODULE_RULES: ImportRule[] = [
     // recurse intentionally omitted — void elements must remain childless.
   },
 
+  // YouTube iframes and native <video> elements → base.video (LEAF).
+  //
+  // NOTE on layering: src/core/ MUST NOT import from src/modules/. The
+  // canonical YouTube URL parser lives in src/modules/base/video/youtube.ts
+  // (parseYoutubeId). We inline a minimal equivalent here — a hostname check
+  // against the known YouTube domains. It does NOT extract the video ID;
+  // base.video's render() re-parses the stored videoUrl at publish time.
+  //
+  // `<iframe src="https://www.youtube.com/embed/ID">` → base.video
+  // `<iframe src="https://player.vimeo.com/...">` → base.container fallback
+  // `<video src="clip.mp4" controls>` → base.video
+  // `<video><source src="clip.mp4"></video>` → base.video (videoUrl from <source>)
+
+  // Inline YouTube host check — the canonical parser (parseYoutubeId) lives in
+  // src/modules/base/video/youtube.ts; layering rules forbid importing it here.
+  // This minimal variant only needs to distinguish "YouTube" from "not YouTube"
+  // so non-YouTube iframes still fall back to base.container.
+  {
+    match: 'iframe',
+    map: (el) => {
+      const src = attr(el, 'src')
+      let isYoutube = false
+      if (src) {
+        try {
+          const host = new URL(src).hostname.toLowerCase().replace(/^www\./, '')
+          isYoutube = host === 'youtube.com' || host === 'm.youtube.com' || host === 'youtube-nocookie.com' || host === 'youtu.be'
+        } catch {
+          // malformed URL — not YouTube
+        }
+      }
+
+      if (!isYoutube) {
+        // Non-YouTube iframes (Vimeo, maps, forms, arbitrary embeds) fall back
+        // to base.container so their src/attributes are preserved via htmlAttributes.
+        return { moduleId: 'base.container', props: { tag: 'custom', customTag: 'iframe' } }
+      }
+
+      // Map YouTube-specific query params from the src URL
+      let noRelatedVideos = false
+      let playsinline = false
+      try {
+        const params = new URL(src).searchParams
+        noRelatedVideos = params.get('rel') === '0'
+        playsinline = params.get('playsinline') === '1'
+      } catch {
+        // ignore malformed src
+      }
+
+      return {
+        moduleId: 'base.video',
+        props: {
+          videoUrl: src,
+          ...(attr(el, 'title') ? { title: attr(el, 'title') } : {}),
+          ...(noRelatedVideos ? { noRelatedVideos: true } : {}),
+          ...(playsinline ? { playsinline: true } : {}),
+        },
+      }
+    },
+    // Iframes are leaf nodes — no meaningful DOM children to recurse into.
+    recurse: false,
+  },
+
+  {
+    match: 'video',
+    map: (el) => {
+      // Prefer the <video src> attribute; fall back to the first <source src>
+      // child. Recurse is false so <source> children are consumed here, not
+      // emitted as separate nodes.
+      const videoUrl =
+        attr(el, 'src')
+        || el.querySelector('source')?.getAttribute('src')
+        || ''
+
+      return {
+        moduleId: 'base.video',
+        props: {
+          videoUrl,
+          autoplay: el.hasAttribute('autoplay'),
+          loop: el.hasAttribute('loop'),
+          muted: el.hasAttribute('muted'),
+          controls: el.hasAttribute('controls'),
+          playsinline: el.hasAttribute('playsinline'),
+        },
+      }
+    },
+    // Do not recurse — <source> children are consumed by the rule above.
+    recurse: false,
+  },
+
   // Catch-all for every other tag (li, figure, blockquote, form, table,
   // dialog, …). MUST use tag:'custom' + customTag so resolveHtmlTag
   // emits the real element name — tag:'div' + customTag would render <div>.
diff --git a/src/modules/base/video/VideoEditor.tsx b/src/modules/base/video/VideoEditor.tsx
@@ -90,7 +90,8 @@ export const VideoEditor: React.FC<ModuleComponentProps<VideoStoredProps>> = ({
 
   // ─── YouTube ────────────────────────────────────────────────────────────
   if (youtubeId) {
-    const src = youtubeEmbedUrl(youtubeId, props.autoplay)
+    const src = youtubeEmbedUrl(youtubeId, props.autoplay, props.noRelatedVideos)
+    const iframeTitle = props.title || 'YouTube video'
     if (posterUrl) {
       return (
         <div {...nodeWrapperProps} className={mcClassName} style={FACADE_WRAP_STYLE}>
@@ -105,7 +106,7 @@ export const VideoEditor: React.FC<ModuleComponentProps<VideoStoredProps>> = ({
           />
           <iframe
             src={src}
-            title="YouTube video"
+            title={iframeTitle}
             loading="lazy"
             frameBorder="0"
             allow="autoplay; encrypted-media; fullscreen"
@@ -121,7 +122,7 @@ export const VideoEditor: React.FC<ModuleComponentProps<VideoStoredProps>> = ({
       <div {...nodeWrapperProps} className={mcClassName} style={FACADE_WRAP_STYLE}>
         <iframe
           src={src}
-          title="YouTube video"
+          title={iframeTitle}
           loading="lazy"
           frameBorder="0"
           allow="autoplay; encrypted-media; fullscreen"
diff --git a/src/modules/base/video/index.ts b/src/modules/base/video/index.ts
@@ -91,6 +91,8 @@ export const VideoModule: ModuleDefinition<VideoProps> = {
         { label: 'Auto', value: 'auto' },
       ],
     },
+    title: { type: 'text', label: 'Video title', description: 'Accessibility label for the embedded YouTube player iframe.' },
+    noRelatedVideos: { type: 'toggle', label: 'Hide related videos', description: 'Adds rel=0 to suppress YouTube recommended videos after playback.' },
   },
 
   // Single source of truth: defaults are derived from the schema's `default`
@@ -118,6 +120,8 @@ export const VideoModule: ModuleDefinition<VideoProps> = {
       return renderYoutube({
         youtubeId,
         autoplay: Boolean(props.autoplay),
+        noRelatedVideos: Boolean(props.noRelatedVideos),
+        title: String(props.title || 'YouTube video'),
         posterUrl: String(props.poster ?? ''),
         posterMedia: props._resolvedMediaByKey?.poster ?? null,
       })
@@ -167,6 +171,9 @@ export const VideoModule: ModuleDefinition<VideoProps> = {
 interface YoutubeRenderInput {
   youtubeId: string
   autoplay: boolean
+  noRelatedVideos: boolean
+  /** Accessibility title for the iframe element. */
+  title: string
   /** Raw author-set poster URL (already escapeProps-passed). */
   posterUrl: string
   /** Resolved poster asset (variants, intrinsic dims) if the publisher pre-pass ran. */
@@ -201,12 +208,12 @@ const YOUTUBE_CSP_SOURCES: CspSourceRequirement[] = [
  * Without a poster: emit just the iframe, also `loading="lazy"`.
  */
 function renderYoutube(input: YoutubeRenderInput): RenderOutput {
-  const embedSrc = youtubeEmbedUrl(input.youtubeId, input.autoplay)
+  const embedSrc = youtubeEmbedUrl(input.youtubeId, input.autoplay, input.noRelatedVideos)
   if (!embedSrc) return { html: '' }
 
   const iframeAttrs = [
     `src="${embedSrc}"`,
-    `title="YouTube video"`,
+    `title="${input.title}"`,
     `loading="lazy"`,
     `frameborder="0"`,
     `allow="autoplay; encrypted-media; fullscreen"`,
diff --git a/src/modules/base/video/props.ts b/src/modules/base/video/props.ts
@@ -12,6 +12,10 @@ export const VideoPropsSchema = Type.Object({
     [Type.Literal('none'), Type.Literal('metadata'), Type.Literal('auto')],
     { default: 'metadata' },
   ),
+  /** Iframe title attribute for YouTube embeds. Improves accessibility. */
+  title: Type.String({ default: 'YouTube video' }),
+  /** When true, appends rel=0 to the YouTube embed URL to suppress related videos. */
+  noRelatedVideos: Type.Boolean({ default: false }),
 })
 
 export type VideoStoredProps = Static<typeof VideoPropsSchema>
diff --git a/src/modules/base/video/youtube.ts b/src/modules/base/video/youtube.ts
