fix: YouTube embeds failing with Error 153 in the desktop app (macOS)#6280
Open
rejaad wants to merge 5 commits into
Open
fix: YouTube embeds failing with Error 153 in the desktop app (macOS)#6280rejaad wants to merge 5 commits into
rejaad wants to merge 5 commits into
Conversation
Member
Pull request changelogAppAddedChangedDeprecatedRemovedFixedSecurityWebsiteAddedChangedDeprecatedRemovedFixedSecurityHostingAddedChangedDeprecatedRemovedFixedSecurity |
YouTube /embed iframes in project descriptions fail to play inside the Tauri desktop app with "Video player configuration error" (Error 153), while working fine on the website. The cause is the app's document origin (tauri://localhost) which YouTube's embedded player rejects. Inject origin=https://modrinth.com into allowed YouTube embed URLs in the shared markdown sanitizer so the player receives a valid web origin. This is applied in the same code path used by both the website and the app, and is a no-op on the website (already served from modrinth.com). Also allow the referrerpolicy attribute on iframes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
First attempt at fixing YouTube embeds failing with Error 153 in the desktop app: inject origin=https://modrinth.com into allowed YouTube embed URLs and add referrerpolicy="unsafe-url" to the iframe via the shared markdown sanitizer. This alone does not fix macOS: WKWebView refuses to send any Referer for a cross-origin subframe when the parent document loads from the custom tauri://localhost scheme, regardless of referrerpolicy. Kept because it is harmless on the website and correct for platforms that do send a referrer. The working macOS fix follows in later commits. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Inline YouTube embeds cannot play in the app on macOS because the tauri://localhost parent never sends a Referer to the cross-origin iframe. Add open_video_overlay / close_video_overlay commands that load the standard watch?v= page in a child webview (a real top-level origin, so playback works) positioned centered over the main window, reusing the ads webview child pattern. An injected script (youtube-theater.js) hides YouTube's chrome and expands the player to fill the popup, so the overlay shows only the video. Commands are registered in build.rs for ACL permission generation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace inline YouTube iframes in project descriptions with a thumbnail facade; clicking it invokes the open_video_overlay command and shows a dimmed backdrop with a close button. Esc or clicking the backdrop closes the overlay and stops playback. This is app-frontend only, so the shared @modrinth/ui description component (used by the website, where inline iframes work) is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
rejaad
force-pushed
the
fix/youtube-embed-origin
branch
from
263fba7 to
42a9391
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #5908
Related: #6274 (the "videos not working" half — see Linux note below)
What this fixes
Embedded YouTube videos in project descriptions fail to play in the desktop app with "Video player configuration error" (Error 153), forcing you to open them in a browser. This PR makes them play inside the app.
Why it happens
The app's main webview loads from the custom
tauri://localhostscheme. YouTube's/embedplayer is gated on the HTTPRefererheader, and WKWebView (macOS) will not attach aRefererto a cross-origin subframe whose parent document uses a non-HTTP scheme — so the embed always receives an empty referrer and errors. I confirmed this directly: the same embed returnsplayabilityStatus: OKwhen loaded with any non-empty referrer, andERRORwith none.useHttpsSchemedoesn't help — it's gated to Windows/Android intauri-runtime-wryand is a no-op on macOS — so the document scheme can't simply be changed.The approach
Inline iframes can't be made to work on macOS, so YouTube embeds are rendered as a click-to-play overlay instead:
open_video_overlay/close_video_overlay): a child webview (reusing the existing ads child-webview pattern) loads the standardwatch?v=page — a real top-level origin, so playback works — centered over the main window.Files / scope
I know the project prefers small, focused PRs — this is one fix but spans a few layers (sanitizer, Rust command, frontend). Happy to split it if reviewers would rather review it in pieces.
packages/utils/parse.ts,packages/utils/highlightjs/index.ts— an earlier attempt that forcesorigin=+referrerpolicyon YouTube embeds in the shared markdown sanitizer. Note: this is shared@modrinth/utils, so it also affects the website. It's harmless there (and correct for platforms that do send a referrer), but it does not fix macOS on its own — the overlay does. Can drop these commits if you'd prefer the app-only change.apps/app/src/api/utils.rs,apps/app/build.rs,apps/app/src/api/youtube-theater.js— the overlay commands + injected player-only script.apps/app-frontend/src/pages/project/Description.vue,apps/app-frontend/src/helpers/utils.js— the facade + overlay UI (kept in the app frontend so the shared@modrinth/uidescription component, used by the website where inline iframes work, is untouched).Known caveats
Testing
http://tauri.localhost, which does send a referrer, so embeds may already work there — a reviewer with Windows could confirm whether the overlay is needed/appropriate on that platform).Disclosure
Most of this was written with AI assistance (Claude). I dug into the root cause and verified the macOS fix works on my machine, but I completely understand if you'd rather not merge AI-authored work or want to rework it — no hard feelings either way.