[Bug]: Ios Youtube embed player issue - Blocked a frame with origin "ionic://localhost" from accessing a frame with origin "https://www.youtube.com". Protocols must match.

[DharaniDevi2301]

Capacitor Version

Capacitor Version : 6.2.1
Ionic version : 8

Other API Details

Ionic(Angular) capacitor ios

Platforms Affected

• iOS
• Android
• Web

Current Behavior

Youtube video player is not playing . I have updated the Youtube IFrame Api implementation too. But Still getting this cors error. Blocked a frame with origin "ionic://localhost" from accessing a frame with origin "https://www.youtube.com". Protocols must match. It happens only on IOS Devices only. In Android Devices , youtube video is playing well.

Expected Behavior

Youtube player should be played without cors error

Project Reproduction

you can check in the latest version of the capacitor

Additional Information

No response

[Gildas-GH]

Capacitor 7 is also affected. I'm reproducing this on iOS 18.6.2.

[Gildas-GH]

YouTube’s embedding system requires a valid HTTP Referer header to verify the origin of the embed request.
In a Capacitor/iOS WebView, no valid Referer is sent with the iframe request, not even "capacitor://localhost"

Error 153: playability error code embedder identity missing referrer

Looks like it's a known bug since July 2020 : #3210

[amaglione]

I'm also running into the same issue. Anyone find a workaround?

[IgorSamer]

I was also facing this issue, and the workaround I found was to create a proxy through my website.
On the site, I added a route specifically to embed the YouTube video, and then I embed that route from my website within the Capacitor app.
This way, the video loads over HTTPS instead of the capacitor:// protocol, which bypasses the YouTube restriction on iOS.

Workaround steps

1. Create a route on your website (e.g. /video or /embed).
2. Make that route accept a ?id= parameter for the YouTube video ID.
3. In that route, generate the YouTube embed iframe using the received ID.
4. Allow your Capacitor app domain in the site's CORS or iframe settings.
5. In your Capacitor app, embed your site’s route instead of the direct YouTube URL.

[srashmiacharya-art]

I’ve been facing the same issue for the past four days. Does anyone have a workaround or fix for it?

[dpalou]

We have the same issue in our app, but we use Cordova instead of Capacitor. I opened an issue in the cordova-plugin-ionic-webview repository: ionic-team/cordova-plugin-ionic-webview#701

I tried modifying the iOS source code to force sending a Referer on each request. Before executing the WebView's loadRequest, I tried to add the Referer to the request as suggested by the Youtube documentation:

[request addValue:@"https://my.test.app" forHTTPHeaderField:@"Referer"];

But inspecting the WebView requests I see that the Referer is still not being sent and Youtube videos don't work.

However, if I force the WebView to load an online URL (the Youtube one) when the app starts instead of a local URL (my app's index.html), then I see that the requests contain the Referer https://my.test.app. So It seems WKWebView is not sending the Referer when using a custom scheme or local file, as it was already mentioned in this issue:

ionic-team/cordova-plugin-ionic-webview#365

I guess this issue should be fixed by Apple, so I also sent a report to Apple using the Feedback Assistant.

In our app we'll probably end up using a proxy as a workaround, similar to what IgorSamer explained in a comment above.

[ionitron-bot]

This issue needs more information before it can be addressed. In particular, the reporter needs to provide a minimal sample app that demonstrates the issue. If no sample app is provided within 15 days, the issue will be closed.
Please see the Contributing Guide for how to create a Sample App.
Thanks! Ionitron 💙

[wsamoht]

Here is a reproduction - https://github.com/wsamoht/capacitor-youtube-video-error-ios-8205

Reproducing

Run the following:

npm install
ionic cap build ios

Then run in an iOS Simulator and try to play the YT video.

Running with Live Reload works (YouTube doesn't give an error) because the HTTP scheme is http vs. capacitor. This is why I believe Android works too.

Resources

• https://developers.google.com/youtube/terms/required-minimum-functionality
  • Mentions how to handle WebViews
• https://developers.google.com/youtube/iframe_api_reference