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