bug(Angular Youtube player: Getting YT is undefined in Pause video function

[mattiLeBlanc]

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

For one of our clients we see a lot of errors like YT is not definedReferenceError: YT is not defined.
When I check the source of the error, it is happening in

   /** See https://developers.google.com/youtube/iframe_api_reference#pauseVideo */
    pauseVideo() {
        if (this._player) {
            this._player.pauseVideo();
        }
        else {
            this._getPendingState().playbackState = YT.PlayerState.PAUSED;
        }

YT is not available somehow.

I haven;t been able to reproduce this error so I don't know if it is a firewall related issue, that some youtube code gets flittered out?

Reproduction

I can't reproduce this issue in Stackblitz because it is an internal source code issue.
the Code I use for using the player is:

<youtube-player [height]="height" [width]="width"  (stateChange)="stateChange($event)" [playerVars]="playerVars" #youtubePlayer></youtube-player>

Expected Behavior

No error when pausing video

Actual Behavior

Throwing YT is undefined error

Environment

• Angular: 17
• CDK/Material: 17
• Browser(s): 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36`
• Operating System (e.g. Windows, macOS, Ubuntu): Android table

[amysorto]

It looks like that error is surfaced directly from the YouTube API. It's certainly odd that is cannot be reproduced either on your end. Its interesting you are only seeing an error like this on pause and not on initialization or play, so I doubt things are getting filtered out otherwise it would have failed before.

Is this happening consistently for users who are seeing it?

[mattiLeBlanc]

@amysorto Hi Amy,
I have to reach out to our customer using our product that triggers the error. When I go to the same video, it is working fine.
I hope they can tell me what they do or if there are any things filtered by their corporate wifi.

I have checked our logs and it happens mostly for 2 users, but one of the users triggers 90% of this error over the last 3 months, like every week.
Device is always 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36.
I will investigate further.

[crisbeto]

Random thought: could it be something like an ad blocker that is blocking the Youtube script?

[mattiLeBlanc]

@crisbeto yes, that could very well be the case. I just want to make sure I look at all angles.

[mattiLeBlanc]

@crisbeto Does this mean using the latest version of this component or is the fix happening in youtube source code?

[mattiLeBlanc]

And thank you for picking this up

[crisbeto]

It should be fixed when you update @angular/youtube-player.

[mattiLeBlanc]

@crisbeto Is this error related to the fix that was done?

Cannot read properties of null (reading 'src')TypeError: Cannot read properties of null (reading 'src')
    at q.sendMessage (https://www.youtube.com/s/player/79e6d03a/www-widgetapi.vflset/www-widgetapi.js:275:96)

We are gettting some of those messages since I upgrade to latest Angular Youtube component.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}