ngx-youtube-embed

Install

npm i ngx-youtube-embed

Usage

Import the module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { NgxYoutubePlayerModule } from 'ngx-youtube-embed';
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxYoutubePlayerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add to template:

<youtube-embed videoId="<video id>"></youtube-embed>

<youtube-embed [videoId]="id" width="1280" height="720" (ready)="savePlayer($event)"
        (change)="onStateChange($event)" [protocol]="'https'" 
        [playerVars]="{ controls: 1, showinfo: 0, rel: 0, autoplay: 1, modestbranding: 0 }">
</youtube-embed>

Handle variables & events/methods inside the component:

export class AppComponent {
 
  id: string = '';
  private ytEvent: YT.PlayerEvent;
  private player: YT.Player;
  playerVars: YT.PlayerVars = {
    controls: 1, 
    showinfo: 0, 
    rel: 0, 
    autoplay: 1, 
    modestbranding: 0 
  };
  
  constructor() {}
 
  onStateChange(event) {
    this.ytEvent = event.data;
  }
 
  savePlayer(player) {
    this.player = player;
  }
 
  playVideo() {
    this.player.playVideo();
  }
 
  pauseVideo() {
    this.player.pauseVideo();
  }
}

Additional Info

The project is based off of ngx-youtube-player. The MIT license for this is kept intact here.

Look into the YT.Player interface for more details on what is or is not possible.