fix(youtube-player): avoid errors with clobbered variables

Sometimes the browser exposes elements globally based on their `id` or `name` which can break the `youtube-player`. These changes add some protections around it.

Author: crisbeto

goldens/youtube-player/index.api.md

@@ -7,8 +7,8 @@
 /// <reference types="youtube" />
 
 import { AfterViewInit } from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
-import * as i0 from '@angular/core';
 import { InjectionToken } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
@@ -97,9 +97,9 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
     set width(width: number | undefined);
     youtubeContainer: ElementRef<HTMLElement>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<YouTubePlayer, "youtube-player", never, { "videoId": { "alias": "videoId"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "startSeconds": { "alias": "startSeconds"; "required": false; }; "endSeconds": { "alias": "endSeconds"; "required": false; }; "suggestedQuality": { "alias": "suggestedQuality"; "required": false; }; "playerVars": { "alias": "playerVars"; "required": false; }; "disableCookies": { "alias": "disableCookies"; "required": false; }; "loadApi": { "alias": "loadApi"; "required": false; }; "disablePlaceholder": { "alias": "disablePlaceholder"; "required": false; }; "showBeforeIframeApiLoads": { "alias": "showBeforeIframeApiLoads"; "required": false; }; "placeholderButtonLabel": { "alias": "placeholderButtonLabel"; "required": false; }; "placeholderImageQuality": { "alias": "placeholderImageQuality"; "required": false; }; }, { "ready": "ready"; "stateChange": "stateChange"; "error": "error"; "apiChange": "apiChange"; "playbackQualityChange": "playbackQualityChange"; "playbackRateChange": "playbackRateChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YouTubePlayer, "youtube-player", never, { "videoId": { "alias": "videoId"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "startSeconds": { "alias": "startSeconds"; "required": false; }; "endSeconds": { "alias": "endSeconds"; "required": false; }; "suggestedQuality": { "alias": "suggestedQuality"; "required": false; }; "playerVars": { "alias": "playerVars"; "required": false; }; "disableCookies": { "alias": "disableCookies"; "required": false; }; "loadApi": { "alias": "loadApi"; "required": false; }; "disablePlaceholder": { "alias": "disablePlaceholder"; "required": false; }; "showBeforeIframeApiLoads": { "alias": "showBeforeIframeApiLoads"; "required": false; }; "placeholderButtonLabel": { "alias": "placeholderButtonLabel"; "required": false; }; "placeholderImageQuality": { "alias": "placeholderImageQuality"; "required": false; }; }, { "ready": "ready"; "stateChange": "stateChange"; "error": "error"; "apiChange": "apiChange"; "playbackQualityChange": "playbackQualityChange"; "playbackRateChange": "playbackRateChange"; }, never, never, true, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<YouTubePlayer, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YouTubePlayer, never>;
 }
 
 // @public
@@ -113,11 +113,11 @@ export interface YouTubePlayerConfig {
 // @public (undocumented)
 export class YouTubePlayerModule {
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<YouTubePlayerModule, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YouTubePlayerModule, never>;
     // (undocumented)
-    static ɵinj: i0.ɵɵInjectorDeclaration<YouTubePlayerModule>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<YouTubePlayerModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<YouTubePlayerModule, never, [typeof YouTubePlayer], [typeof YouTubePlayer]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YouTubePlayerModule, never, [typeof YouTubePlayer], [typeof YouTubePlayer]>;
 }
 
 // (No @packageDocumentation comment for this package)

src/youtube-player/youtube-player.ts

@@ -496,7 +496,13 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
       return;
     }
 
-    if (!window.YT || !window.YT.Player) {
+    // Might be clobbered by something like `<form id="YT"><input name="Player"></form>`.
+    if (
+      typeof window.YT !== 'object' ||
+      !window.YT ||
+      !window.YT.Player ||
+      typeof window.YT.Player !== 'function'
+    ) {
       if (this.loadApi) {
         this._isLoading = true;
         loadApi(this._nonce);
@@ -508,7 +514,12 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
         );
       }
 
-      this._existingApiReadyCallback = (window as YoutubeWindow).onYouTubeIframeAPIReady;
+      const existingCallback = (window as YoutubeWindow).onYouTubeIframeAPIReady;
+
+      // The callback might be clobbered by an element with an ID of `onYouTubeIframeAPIReady`.
+      if (typeof existingCallback === 'function') {
+        this._existingApiReadyCallback = (window as YoutubeWindow).onYouTubeIframeAPIReady;
+      }
 
       (window as YoutubeWindow).onYouTubeIframeAPIReady = () => {
         this._existingApiReadyCallback?.();