Отображение нескольких видео YouTube на странице с помощью YouTube YouTube ifra Angular 6

Question

Здравствуйте. Я использую Angular 6 и у меня есть компонент видео, в котором я инициализирую API iframe для YouTube и отображаю видео YouTube с определенным идентификатором видео (встроенный идентификатор)

вот мои видео.component.ts

  public YT: any;
  public player: any;
  public reframed: Boolean = false;

  constructor() { }

  ngOnInit() {
    this.init();
    window['onYouTubeIframeAPIReady'] = (e) => {
      this.YT = window['YT'];
      this.reframed = false;
      this.player = new window['YT'].Player('player', {
        videoId: 'z4JUm0Bq9AM',
      });
    };
  }

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

Вот мой videos.component.html

<div class="width">
    <div id="player">
    </div>
</div>

все работает нормально !!

Здесь я хочу показать несколько видео на той же странице, где я буду получать идентификатор видео из базы данных. Итак, я попробовал это ... из другого компонента я буду получать идентификаторы видео в виде массива строк. Я отправляю эти идентификаторы в качестве входного параметра для videos.component

    <div *ngFor="let video of topic._source.videos">
        <app-videos [video]='video'></app-videos>
    </div>

здесь video - это встроенный идентификатор видео на YouTube.

теперь мой videos.component.ts -

export class VideosComponent implements OnInit {

  @Input() video: string;

  public YT: any;
  public player: any;
  public reframed: Boolean = false;

  constructor() { }

  ngOnInit() {
    this.init();
    console.log(this.video)
    window['onYouTubeIframeAPIReady'] = (e) => {
      this.YT = window['YT'];
      this.reframed = false;
      this.player = new window['YT'].Player('player', {
        videoId: this.video,
      });
    };
  }

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

В журнале консоли я вижу, что три видео идентификатора идут сюда. но я вижу только видео первого удостоверения личности.

Так что я на самом деле пытаюсь показать все видео. Я имею в виду все идентификаторы, которые я получаю из базы данных. Извините, если я делаю что-то в корне неправильно. Помогите мне, пожалуйста. Заранее спасибо