Video player configuration error 153 on iOS for @angular/youtube-player

[sidsaxena0]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Description
When using the @angular/youtube-player component to embed YouTube videos in an Angular application, iOS devices display a “Video player configuration error 153” and the video fails to play. Desktop and Android devices do not experience this issue. Similar symptoms have been reported by other projects ([github.com](toeverything/AFFiNE#13848)).

Steps to reproduce

• Create a new Angular project and install @angular/youtube-player.
• Add <youtube-player [videoId]="'VIDEO_ID'"></youtube-player> to a component template.
• Serve the application and access the page on an iOS device via Safari.
• Observe the video player.

Expected behavior
The YouTube video should load and play correctly on iOS, just as it does on desktop and Android platforms.

Actual behavior
On iOS devices, the video area displays “Video player configuration error 153” and does not play the video.

Environment

• Angular version: 19.2.14
• @angular/youtube-player version: 19.2.18
• Ionic Framework (@ionic/angular) version: 8.6.0
• Browser: Safari on iOS (multiple versions)

Additional context
The issue persists even when using the youtube-nocookie.com domain for the embed. Reproduced across multiple iOS devices and networks.

Reproduction

N/A – this bug occurs only in a Capacitor mobile app on iOS and cannot be reproduced via an online StackBlitz because it depends on the native iOS player. To reproduce, follow these steps in a Capacitor project:

1. Create a new Angular project and install @angular/youtube-player.
2. Wrap the app into a Capacitor iOS project (e.g., using ionic build and npx cap add ios).
3. In an Angular component template, add <youtube-player [videoId]="'VIDEO_ID'"></youtube-player> with a valid video ID.
4. Run the app on an iOS device using ionic capacitor run ios.
5. The embedded player fails to load and shows “Video player configuration error 153”.

Expected Behavior

The embedded YouTube player should load and play the specified video normally on iOS just like it does on desktop and Android. Users should not see a “Video player configuration error 153”.

Actual Behavior

On iOS devices using an Ionic/Capacitor mobile application, the embedded YouTube video fails to play and instead shows an error message: "Video player configuration error 153". The issue does not occur on desktop or Android devices.

Environment

• Angular: 19.2.14
• CDK/Material: 19.2.18
• Browser(s): Safari on iOS (multiple versions)
• Operating System (e.g. Windows, macOS, Ubuntu): iOS 15/16

[ajitzero]

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

[sidsaxena0]

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.

[ajitzero]

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

[sidsaxena0]

@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.

[sidsaxena0]

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);
      });
    }
  }

[novaylt123]

@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. :(

[madhuri-predictive]

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

[jviolas]

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.

[Pablios]

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

[novaylt123]

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.

[josepcrespo]

I'm facing the same fucking error, developing for iOS, wrapping my app using Capacitor (not Angular). None of the "solutions" I've tried is solving the 153 error. Thanks YouTube… 🤬

[laki889]

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?

[novaylt123]

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

[pauloallvs]

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

[josepcrespo]

@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).

[laki889]

@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.

[BrainstemStudio]

@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.

[jviolas]

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.

[Pablios]

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

[adolgachev]

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