问如何修复页面上多个播放器的角元素中的“TypeError: youTubeIframeAPIReady不是函数”

EN

<my-video some-property="some value"></my-video>
<my-video some-property="some value"></my-video>

import { Component, OnInit} from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {
  videoYoutubeId = 'WWXfdIK1WxA';
  private player: any;
  private YT: any;

  constructor() {}

  ngOnInit() {
    this.loadYoutubeScript();
    this.createVideoPlayer();
  }

  loadYoutubeScript() {
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  createVideoPlayer() {
    const youTubeIframeAPIReady = window['onYouTubeIframeAPIReady'];

    window['onYouTubeIframeAPIReady'] = () => {

      this.YT = window['YT'];
      const iframeId = this.videoYoutubeId.toLowerCase();
      this.player = new window['YT'].Player(iframeId, {
        events: {
          'onReady': this.onPlayerReady.bind(this)
        }
      });

      youTubeIframeAPIReady(); // <==== Uncaught TypeError: youTubeIframeAPIReady is not a function
    };
  }

}

<iframe
   [id]="videoYoutubeId | lowercase"
   width="640"
   height="360"
   style="width: 100%; height: 100%; padding: 0; margin: 0;"
   frameborder="0"
   src="https://www.youtube.com/embed/WWXfdIK1WxA?controls=1&rel=0&showinfo=0&autoplay=0&modestbranding=1&enablejsapi=1&html5=1&fs=0">
</iframe>