bug(Youtube player): invalid video id error for youtube playlist

[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

Not sure

Description

We are loading either youtube video (via videoId) or youtube playlist (via playervars list).
Since recently (one week ago) we are getting errors like:

Invalid video idError: Invalid video id
    at Gb (https://www.youtube.com/s/player/9fe2e06e/www-widgetapi.vflset/www-widgetapi.js:196:148)

on some devices loading a youtube playlist.
Strangely, I can watch the playlist fine, but my colleague running an older macbook with same Chrome browser cant and it triggers that error.
When my colleague goes to the iframe link directly:
https://www.youtube.com/embed/null?list=OLAK5uy_nTomD0YKdOKGu-LTFeKx0NA4bKgaeX-To&loop=1&listType=playlist&enablejsapi=1&widgetid=1&aoriginsup=1&vf=6 it does work.
The null value in the link, which probably is where a videoId normally sits is null, but that seems to be ignored by Youtube.

I am unclear what causes this issues and as far as I know, when loading a playlist, I only provide the list id.
The Docs clearly state:
Note: If you specify values for the list and listType parameters, the IFrame embed URL does not need to specify a video ID.

So, videoId doesn't seem to be required when loading a playlist. And it used to work.
So what is going on for some users that I am getting an Invalid Video ID?

Reproduction

Not possible to reproduce easily.
On my colleagues computer, inspecting the youtube player her iframe looks like:

<iframe frameborder=“0” allowfullscreen=“” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=“strict-origin-when-cross-origin” title=“YouTube video player” width=“747" height=“420” data-gtm-yt-inspected-98279342_13=“true” data-gtm-yt-inspected-98279342_23=“true” data-gtm-yt-inspected-98279342_25=“true” data-gtm-yt-inspected-98279342_157=“true”></iframe>

and there is a js error Error: Invalid video id at Gb (https://www.youtube.com/s/player/9fe2e06e/www-widgetapi.vflset/www-widgetapi.js:196:148) thrown.

For me, the iframe looks like:

<iframe frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Bosnia &amp; Herzegovina  Cultural inclusion Resource" width="747" height="420" src="[https://www.youtube.com/embed/null?list=PLbPc-CDfNeBWpqQQLmEJVMOdZWlCY6bTg&amp;loop=1&amp;listType=playlist&amp;enablejsapi=1&amp;aoriginsup=1&amp;vf=1](https://www.youtube.com/embed/null?list=PLbPc-CDfNeBWpqQQLmEJVMOdZWlCY6bTg&loop=1&listType=playlist&enablejsapi=1&origin=https%3A%2F%2Fapp.resparke.com&widgetid=1&aoriginsup=1&vf=1)" id="widget2" data-gtm-yt-inspected-98279342_13="true" data-gtm-yt-inspected-98279342_23="true" data-gtm-yt-inspected-98279342_25="true" data-gtm-yt-inspected-98279342_157="true"></iframe>

Expected Behavior

Load playlist normally

Actual Behavior

Invalid video idError: Invalid video id
at Gb (https://www.youtube.com/s/player/9fe2e06e/www-widgetapi.vflset/www-widgetapi.js:196:148)

when loading a playlist via playervars list argument and keeping videoId empty.

Environment

• Angular : 19
• CDK/Material: 19
• Browser(s): Chrome 137, Safari Lastest macos, safari IOS
• Operating System (e.g. Windows, macOS, Ubuntu): macos

[mattiLeBlanc]

Some more info:
on my Wifi it seems to work pretty well, when I go to 5g mode on my phone, it intermittently works.

[mattiLeBlanc]

This is a test page:

http://apollo-youtube.s3-website-ap-southeast-2.amazonaws.com/

It should look like this:

Some users are getting this:

This confirms that there seems to be an issue in youtube using playlists. Only when I provide the videoId explicitly next to the playlist id, the iframe will load correctly. If I only provide the playlist in the playerVars, some people will get this videoId error.

I am going to try to get the videoIds of the playlist and provide both playlistid and video to mitigate this issue.
But this definitely started happening since last week.

[crisbeto]

Most likely this is an issue with YouTube, rather than our wrapper, since we haven't landed any changes to it in the past few months.

[mattiLeBlanc]

@crisbeto Yes I agree, it is youtube related. My test page is using the API directly.
But you are part of the Google team, right? Do you have somewhere to report this?
Because I don't think youtube has a github page where you can land issues like we do with Angular.

[mattiLeBlanc]

@crisbeto I found the problem, I think.
If you look at player 3 (http://apollo-youtube.s3-website-ap-southeast-2.amazonaws.com/), it is using playlist with NO videoId, so the url does not have embed/null in it. That seems to be the fix.
I will attempt to do a PR on the branch if that is easy.

[mattiLeBlanc]

@crisbeto I am not sure if I can do a Change request on the Angular repo, since that encompasses all.
But this is the code that should change:

const params = {
  host: this.disableCookies ? 'https://www.youtube-nocookie.com' : undefined,
  width: this.width,
  height: this.height,
  // Calling `playVideo` on load doesn't appear to actually play
  // the video so we need to trigger it through `playerVars` instead.
  playerVars: playVideo ? { ...(this.playerVars || {}), autoplay: 1 } : this.playerVars,
};
if (this.videoId) {
  params.videoId = this.videoId;
}
const player = this._ngZone.runOutsideAngular(
  () =>
    new YT.Player(this.youtubeContainer.nativeElement, params),
);

You want to only add videoId if it is present, because if you load a playlist via playyerVars, you don't want an empty videoId (create null in the url). And you also dont want to provide a videoId and a playlistId, because then the iframe goes in to single video mode and you can't do Next and Prev anymore.

Can this please be implemented quickly because it is affecting my system. Otherwise I have to move away from the Angular Youtube package and implement the iframe myself.

[mattiLeBlanc]

@crisbeto I have created a PR: #31403

[crisbeto]

Fixed by #31403.