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… 🤬

[Silver094]

have you got any update?, facing the same issue with capacitor(react)

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

[josepcrespo]

@laki889 I also got it working (I finally got rid of error 153), following the instructions in the post you shared. Thank you so much for sharing your discovery! But it's a shame that we now need a proxy to play YouTube videos in Capacitor-packaged apps for iOS. Now I have to check if it's still possible to use the JavaScript API to control the player.

[BrainstemStudio]

@laki889 I also got it working (I finally got rid of error 153), following the instructions in the post you shared. Thank you so much for sharing your discovery! But it's a shame that we now need a proxy to play YouTube videos in Capacitor-packaged apps for iOS. Now I have to check if it's still possible to use the JavaScript API to control the player.

@josepcrespo
You are likely going to need to implement post messaging between the app and proxy to control the embed from the app. This is something I am planning if the iOS issue is not resolved soon.

So, in the proxy, you will need a message listener

window.addEventListener('message', e => {

    // Check that the message is coming from your app's domain i.e. ionic://localhost
    if (e.origin !== appDomain){
        return;
    }

    // Handle incoming messages
    switch(e.data.action){

        case 'queue':

            let videoID = e.data.args.videoID || '';
            let startSeconds = e.data.args.startSeconds || 0;
            let endSeconds = e.data.args.endSeconds || 0;

            youtubePlayer.loadVideoById({
                videoId : videoID,
                startSeconds : startSeconds,
                endSeconds : endSeconds
            });


        case 'pause':

            youtubePlayer.pauseVideo();

        break;

        case 'play':

            youtubePlayer.playVideo();

        break;

        case 'setVolume':

            let volume = e.data.args.volume || 100;
            youtubePlayer.setVolume(volume);

        break;

        case 'seekTo':

            let seconds = e.data.args.seconds || 0;
            youtubePlayer.seekTo(seconds);

        break;

        // ...etc

    }

});

From within your app, you will need to send messages to the proxy:

document.getElementById('youtubeProxy').contentWindow.postMessage({
    action: '', // e.g. 'play', 'pause', 'queue', 'seekTo', etc
    args : {}, // Optional e.g. { videoID : 'xxxx', seconds : 123, etc }
});

These messages behave like websockets in browsers, but are likely to add a layer of latency. It's not ideal, but it would be the way we would approach it if nothing gets resolved. The really stupid thing is that it's exactly how YouTube embeds currently works, and now that it's bricked, the fix would be to add more overhead on iOS.

I guess the things to check for will be:

1. Make sure you are checking the origin of the message for security, as it opens up a proxy to receiving messages from anywhere.
2. Handling latency, throttle UI actions so you are not creating a bottleneck between user interaction and the proxy responding.
3. You might need two-way messaging to let the app know: is the video loaded, was there an error, or has it been initialised?
4. You might need some sort of authentication between the proxy and app, as your proxy could be abused or at the very least use some CSP on the proxy.

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

[Silver094]

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.

[BrainstemStudio]

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