Skip to content

fix: prevent YouTube embed preview Error 153 in Safari - #76644

Closed
Mustafabharmal wants to merge 1 commit into
WordPress:trunkfrom
Mustafabharmal:fix/73288-youtube-embed-safari-error-153
Closed

fix: prevent YouTube embed preview Error 153 in Safari#76644
Mustafabharmal wants to merge 1 commit into
WordPress:trunkfrom
Mustafabharmal:fix/73288-youtube-embed-safari-error-153

Conversation

@Mustafabharmal

@Mustafabharmal Mustafabharmal commented Mar 18, 2026

Copy link
Copy Markdown
Contributor

What

Fix YouTube embed previews failing with Error 153 in Safari when editing in Gutenberg.
Closes #73288

Why

Safari can drop/refuse a valid referrer/origin context when the editor iframe is loaded via a blob: URL, and when embed previews are populated with document.write().
YouTube now enforces embedded player client identity requirements that rely on a valid referrer/origin, and Safari’s behavior causes it to reject the embed (Error 153).

How

Switch the block editor canvas iframe to use srcDoc (instead of a blob URL).
Switch the embed preview SandBox to use srcDoc (instead of contentDocument.write()).
Update the SandBox unit test to confirm behavior via srcdoc, since JSDOM does not reliably resolve iframe.contentWindow.document for srcdoc.

Testing Instructions

  1. In Safari (desktop):
    1. Create a new post/page in Gutenberg.
    2. Insert a YouTube Embed block.
    3. Paste a valid YouTube URL.
    4. Click Embed and ensure the preview renders normally (no Error 153).
  2. Verify same behavior works in Chrome/Firefox (should remain unchanged).
  3. Ensure other embed previews still render (Vimeo etc.) in the editor.

Screenshots or screencast

Before After
image image

@Mustafabharmal
Mustafabharmal requested review from a team, ajitbohra and ellatrix as code owners March 18, 2026 18:01
@github-actions

github-actions Bot commented Mar 18, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mustafabharmal <mustafabharmal@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: jkmassel <jkmassel@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: dcalhoun <dpcalhoun@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions Bot added [Package] Components /packages/components [Package] Block editor /packages/block-editor labels Mar 18, 2026
@Mustafabharmal
Mustafabharmal marked this pull request as draft March 18, 2026 18:02
@ciampo
ciampo requested a review from Copilot March 18, 2026 18:06
@ciampo ciampo added the [Type] Bug An existing feature does not function as intended label Mar 18, 2026
Copilot AI reviewed Mar 18, 2026
View reviewed changes

Copilot AI 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.

Pull request overview

This PR updates Gutenberg’s iframe-based rendering (editor canvas + embed preview sandbox) to avoid Safari’s blob:/document.write() referrer/origin quirks that lead to YouTube embed previews failing with “Error 153”.

Changes:

  • Switch the block editor canvas iframe from a blob: URL (src) to srcDoc.
  • Switch @wordpress/components SandBox from contentDocument.write() to srcDoc generation.
  • Update the SandBox unit test to assert against the srcdoc attribute (JSDOM compatibility).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
packages/components/src/sandbox/index.tsx Generates sandbox iframe content via srcDoc instead of writing into contentDocument.
packages/components/src/sandbox/test/index.tsx Adjusts test assertions to validate srcdoc rather than nested iframe DOM access.
packages/block-editor/src/components/iframe/index.js Changes editor canvas iframe initialization from blob: URL to srcDoc content.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/components/src/sandbox/index.tsx
Comment on lines +142 to +146
const srcDoc = useMemo( () => {
const docLang =
typeof document !== 'undefined'
? document.documentElement.lang
: undefined;
@t-hamano t-hamano added the Browser Issues Issues or PRs that are related to browser specific problems label Mar 19, 2026
@jsnajdr

jsnajdr commented Mar 24, 2026

Copy link
Copy Markdown
Member

I recently experimented with switching to srcDoc in #75619 but it turned out that it breaks relative hash links. Because a srcDoc iframe has window.location.href === 'about:srcdoc' and doesn't support hash links.

We used to use srcDoc in the past, but then it was switched to blob URLs in #50875 for exactly this reason.

@Mustafabharmal

Mustafabharmal commented Oct 2, 2026

Copy link
Copy Markdown
Contributor Author

Closing in favour of #84014

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

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@ajitbohra ajitbohra Awaiting requested review from ajitbohra
@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

Assignees

No one assigned

Labels

Browser Issues Issues or PRs that are related to browser specific problems [Package] Block editor /packages/block-editor [Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

YouTube embed previews fail with Error 153 in Safari

5 participants

@Mustafabharmal @jsnajdr @ciampo @t-hamano