Fix null issue in url youtube url when running a playlist with no vid…

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 {}