Skip to content

fix: normalize youtube url in Embed#1524

Draft
eaglethrost wants to merge 1 commit into
nextfrom
dimas/rm-17012-fix-embeds
Draft

fix: normalize youtube url in Embed#1524
eaglethrost wants to merge 1 commit into
nextfrom
dimas/rm-17012-fix-embeds

Conversation

@eaglethrost

@eaglethrost eaglethrost commented Jun 24, 2026

Copy link
Copy Markdown
Contributor
🎫 Resolve RM-17012

🎯 What does this PR do?

YouTube watch/share URLs set X-Frame-Options and refuse to be framed, so typeOfEmbed="youtube" embeds rendered blank. We can fix this in the background so they'll still be viewable by normalising them to the embeddable youtube.com/embed/<id> form (carrying any timestamp over to start).

<Embed title="" typeOfEmbed="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
<Embed title="" typeOfEmbed="youtube" url="https://youtu.be/dQw4w9WgXcQ" />
<Embed title="" typeOfEmbed="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=1h2m3s" />

All three now render an <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"> (the last with ?start=3723). Already-embeddable and non-YouTube URLs pass through untouched.

🧪 QA tips

📸 Screenshot or Loom

@kevinports kevinports left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Def on board for this improvement! Just had a few pieces of code feedback.


if (iframe || renderTypeAsIframe) {
return <iframe {...spreadAttrs} src={url} style={iframeStyle} title={title} />;
const src = typeOfEmbed === 'youtube' ? normalizeYouTubeUrl(url) : url;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we move the normalization upstream to processor/transform/embeds.ts to make the UI component agnostic to the URL format?

This would also make it easier to handle edge conditions like if a consumer passes iframe={true} + a YouTube watch URL but omits typeOfEmbed or whatever.

@@ -0,0 +1,38 @@
// YouTube watch/share URLs (youtube.com/watch?v=ID, youtu.be/ID) set X-Frame-Options
// and refuse to be framed. The player only allows embedding via youtube.com/embed/ID.
const YOUTUBE_HOSTS = new Set(['youtube.com', 'www.youtube.com', 'm.youtube.com', 'youtu.be', 'www.youtu.be']);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the m.youtu.be mobile share link host is also plausible and could be included here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants