We need to mention referrerpolicy="strict-origin-when-cross-origin" on the iframe to fix this issue.

Reference: https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-player-api-client-identity

Yes I am aware of that and I did try to add using :

  onPlayerReady(event: any): void {
    const iframe: HTMLIFrameElement | null =
      event?.target?.getIframe?.() ?? null;

    if (iframe) {
      iframe.setAttribute(
        'referrerpolicy',
        'strict-origin-when-cross-origin'
      );
    }
  }

and also in player config

 origin: this.appOrigin,
   widget_referrer: this.appOrigin,

But nothing worked.

You're on the right track. Adding the attribute in this way does not reload the iframe, so you need to unset the src field and reinitialize it.

Something like:

+const ngZone = inject(NgZone);

if (iframe) {
+  ngZone.runOutsideAngular(() => {
     iframe.setAttribute(
       'referrerpolicy',
       'strict-origin-when-cross-origin'
     );
+    const src = iframe.src;
+    iframe.src = undefined;
+    setTimeout(() => { iframe.src = src; }, 0);
+  });
}

You may not need the setTimeout.

From what I saw briefly, the player config doesn't support arbitrary new attributes, and referrer policy isn't yet supported. I think the "proper" fix will require a complete refactor to use the iframe tag directly rather than creating it programmatically.

Of course, if Google/YouTube reverts the need for this attribute, then no fixes will be required.

Someone from the core team will need to make the decision. cc/ @crisbeto @devversion

@ajitzero Thanks! I get your point I will look into it tonight and hopefully get it working. But definitely need fix for this within the library itself.

It doesn't seems to be working I tried your suggestion something like this :

  onPlayerReady(event: any): void {
    // prevent infinite reload loop
    if (this.hasPatchedReferrer) {
      return;
    }
    this.hasPatchedReferrer = true;

    const iframe: HTMLIFrameElement | null =
      event?.target?.getIframe?.() ?? null;

    if (iframe && iframe.src) {
      this.ngZone.runOutsideAngular(() => {
        iframe.setAttribute(
          'referrerpolicy',
          'strict-origin-when-cross-origin'
        );

        const src = iframe.src;
        iframe.src = '';
        setTimeout(() => {
          iframe.src = src;
        }, 0);
      });
    }
  }

@sidsaxena0 Joining in. Alot of people are having the same issue since end of August. Thats when Youtube updated their minimum requirements.

https://developers.google.com/youtube/terms/required-minimum-functionality

There are alot of bandage solutions out there but most are hit or miss. Some of our apps are affected with this as well so was hoping there were open/close issues for this. But surprisingly, this ticket is the only one. :(

Any solution for this? We are also facing the same issue

I'm really not sure that the referer policy will be enough. In a hosted web page, with a correct domain, OK, that will do. But for app bundled and served locally, such as with capacitor, electron or other similar context, the origin of the page is either not sent as Referer header or is not considered as a valid domain by Youtube which go to error 153.
In some of this context, you can workaround that by overriding headers (with beforeSendHeaders() in electron or with some of the examples in https://developers.google.com/youtube/terms/required-minimum-functionality for iOS and Android), but it's not always possible.
Right now, the only possibility I see is to host a minimal page embedded youtube player, and display this page in a iframe in my apps. It works on every platform, in any context, but need more work that just directly embed a youtube player, which is really conter productive.

I'm also having the same problem, it's only happening on iOS = (

We're using Angular for our mobiles apps. On Android the embedded youtube iframe videos work but on iOS, the player displays that 153 error.

Its a iOS issue mostly. Its been more than a month since this cropper up but so far no solution has been introduced other than hit and miss ways.

I also have this problem. Only iOS. Works great on Android and Web.
I'm building the app using Nuxt and Capacitor.

I always get a 153 error page from YouTube embedded videos.

I tried:

• Update referrer policy
• Update meta data to support policy
• Adding new parameters to YT.Player API
• Reimplementing the app to use iframe directly and avoid YT.Player API + add policy update directly to iframe
• Using youtube noccokies host instead of regular youtube.com
• Many other things I can't even remember...

This is a really bad issue and I can't figure out anything that could fix this.

Does anybody know if there is a way to escalate this further somehow?

@laki889 Unfortunately no solution at the moment bud. :(

I'm facing the same problem. I'll follow this discussion in the hope of a solution.

@laki889 This is the Google Issue Tracker with an issue related to this problem: https://issuetracker.google.com/issues/457483150

But trying to understand the problem I'm starting to consider that maybe the root cause of the problem would be on the WebKit implementation on iOS (because it works fine on Safari for macOS).

@josepcrespo @novaylt123 I was able to resolve the issue by adapting the solution explained in this Medium article: https://medium.com/@davidvesely.cz/fixing-youtube-error-153-in-ios-capacitor-apps-a-simple-proxy-solution-5807d3df83d5

Long story short - you need to use a YT proxy in order to provide all request parameters that YT expects now.

@laki889
While this can work as a solution if you are not using any event listeners or custom controls with the embed in the app, however, it doesn't solve apps that embed YouTube and rely on event and custom controls, i.e. Custom controls, playlists, queue next video, etc.

In those apps, the proxy route would require a heavy refactor for these apps to control the proxy via post messaging. Plus, post messaging just adds another layer of latency and vulnerability if misused.

I think, like most devs, we are waiting for a hoisted solution until committing hours to a proxy/postMessage solution. I suspect this relates to the custom schema not being https in capacitator/cordova/etc apps, which unfortunately, can't be set for iOS and hence why it is working in Android.

I think, like most devs, we are waiting for a hoisted solution until committing hours to a proxy/postMessage solution. I suspect this relates to the custom schema not being https in capacitator/cordova/etc apps, which unfortunately, can't be set for iOS and hence why it is working in Android.

@BrainstemStudio That's exactly the issue. This also happens if your app is served with file:// schema. And there is now way to fix this in Angular or any library. The changes must be done on Youtube API, but right now, all issues opened on Google tracker about that seems kinda dead.

Eu também estou com esse problema. Apenas no iOS. Funciona perfeitamente no Android e na Web. Estou desenvolvendo o aplicativo usando Nuxt e Capacitor.

Sempre recebo uma página de erro 153 ao acessar vídeos incorporados do YouTube.

Tentei:

• Atualizar política de referência
• Atualizar metadados para dar suporte à política
• Adicionando novos parâmetros à API do YT.Player
• Reimplementar o aplicativo para usar o iframe diretamente e evitar a API do YT.Player + adicionar atualização de política diretamente ao iframe.
• Utilizando o host do YouTube Noccokies em vez do YouTube normal.com.
• Muitas outras coisas que nem consigo me lembrar...

Este é um problema muito sério e não consigo encontrar nenhuma solução.

Alguém sabe se existe alguma forma de levar isso adiante?

The YouTube error 153 occurs on iOS because the WebView blocks YouTube iframes due to cookie restrictions and origin (CORS) policies.

To work around this, I created an intermediate HTML page (“relay”) inside the app, which securely loads the video using the youtube-nocookie.com domain.

This page receives the video ID via parameter (?v=VIDEO_ID) and manually builds the iframe with the correct permissions, without third-party cookies, and with a valid origin (origin: capacitor://localhost).

With this setup, the video now plays normally on iOS without triggering error 153.

This is my temporary solution — if anyone has a better approach, please share it. If I find a more robust alternative, I’ll update it here as well.

https://github.com/Pablios/youtube-embed-relay

Converting to discussion with https://b.corp.google.com/issues/457483150?pli=1 tracking YouTube issue.

I’m facing the same issue in my Capacitor (React) iOS application. I tried fixing it by adding the origin in the Capacitor configuration, and that partially worked. However, once the video starts playing, the only action I’m able to perform through my custom controls is changing the video URL. All other controls stop responding.

To assist anyone who has a similar case to ours, where we have a custom UI and programmatically need to control YouTube videos from within the app. I have provided code samples on how we approached it and solved for iOS. Please feel free to clone, copy, and use.

The gist:

1. It provides both a proxy and a relay to allow the app and proxy to communicate.
2. You initiate the YouTube Proxy within the app, providing the app and proxy domain origin.
3. Methods in the proxy mirror those of the YouTube API methods
4. The relay then builds the YouTube iFrame and sends messages to and from the app and proxy.

This was built specifically to work around the iOS issue, web apps and Android appear to be working fine.

https://github.com/BrainstemStudio/YouTube-Proxy-Relay