fix(youtube-player): invalid URL when playlist is passed in without videoId (#31403)

* Fix null issue in url youtube url when running a playlist with no videoId

When playing a playlist via playerVars.list = [playlistId] we dont have a videoId available yet. Plus we don't need one, Youtube will start at the first video of the playlist by default.

By injecting an undefined videoId in the YT Player constructur, we end up with null value in the iframe url (`ps://www.youtube.com/embed/null?cc_load_policy=1&enablejsapi=1&controls=1&showinfo=0&rel=0&listType=playlist&list=PLxf07yK_HAvdwhW-L0X3uP5aMe6eEt50v`) which is causing an Invalid Video Id error for consumers.

* Update youtube-player.ts

apply YT.PlayerOptions to params

* Update youtube-player.ts

fix formatting

* Update youtube-player.spec.ts

fix unit test

* Update youtube-player.ts

Fix formatting

(cherry picked from commit 2c87ec3)

Author: mattiLeBlanc

src/youtube-player/youtube-player.spec.ts

@@ -515,7 +515,7 @@ describe('YoutubePlayer', () => {
       let calls = playerCtorSpy.calls.all();
 
       expect(calls.length).toBe(1);
-      expect(calls[0].args[1]).toEqual(jasmine.objectContaining({playerVars, videoId: undefined}));
+      expect(calls[0].args[1]).toEqual(jasmine.objectContaining({playerVars}));
 
       playerSpy.destroy.calls.reset();
       playerCtorSpy.calls.reset();

src/youtube-player/youtube-player.ts

@@ -587,17 +587,22 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
 
     // Important! We need to create the Player object outside of the `NgZone`, because it kicks
     // off a 250ms setInterval which will continually trigger change detection if we don't.
+    const params: YT.PlayerOptions = {
+      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,
+    };
+    // We only want to injecct a videoId if one is provided, otherwise loading a playlist via
+    // playerVars.list, the missing videoId will create a null value in the youtube iframe url
+    // and that can trigger a JS error `Invalid video id` in widget api.
+    if (this.videoId) {
+      params.videoId = this.videoId;
+    }
     const player = this._ngZone.runOutsideAngular(
-      () =>
-        new YT.Player(this.youtubeContainer.nativeElement, {
-          videoId: this.videoId,
-          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,
-        }),
+      () => new YT.Player(this.youtubeContainer.nativeElement, params),
     );
 
     const whenReady = (event: YT.PlayerEvent) => {
@@ -710,9 +715,9 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
                 player.addEventListener(name, listener);
               },
               listener => {
-                // The API seems to throw when we try to unbind from a destroyed player and it doesn't
-                // expose whether the player has been destroyed so we have to wrap it in a try/catch to
-                // prevent the entire stream from erroring out.
+                // The API seems to throw when we try to unbind from a destroyed player and it
+                // doesn'texpose whether the player has been destroyed so we have to wrap it in a
+                // try/catch to prevent the entire stream from erroring out.
                 try {
                   player?.removeEventListener?.(name, listener);
                 } catch {}