How to embed Youtube inside Angular with [youtube-player component]

[puddlejumper26]

There is now an Angular YouTube Player component

To understand the API you need to read the source. It has various inputs, outputs and functions. For example:

example.component.html

<youtube-player
  #player
  [videoId]="videoId"
  (ready)="onReady($event)"
  (stateChange)="onStateChange($event)"
></youtube-player>

example.component.ts

import { Component, Input, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'example'
  templateUrl: './example.component.html'
})
class YoutubePlayerExample implements OnInit {
  @ViewChild('player') player: any;
  videoId: string;

  @Input()
  set id(id: string) {
    this.videoId = id;
  }

  ngOnInit() {
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    document.body.appendChild(tag);
  }

  // Autoplay
  onReady() {
    this.player.mute();         
    this.player.playVideo();    
  }

  // Loop
  onStateChange(event) {
    if (event.data === 0) {
      this.player.playVideo();  
    }
  }
}

example-module.ts

import { NgModule } from '@angular/core';
import { YouTubePlayerModule } from '@angular/youtube-player';

@NgModule({
  imports: [YouTubePlayerModule],
  declarations: [YoutubePlayerExample]
})
export class YoutubePlayerExampleModule {}