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,20 @@ 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) => {