ngx-y2-player

npm install ngx-y2-player

import { NgxY2PlayerModule } from 'ngx-y2-player';
 
@NgModule({
  declarations: [ ...something... ],
  imports: [ ...something... , NgxY2PlayerModule],
  providers: [ ...something... ],
  bootstrap: [ ...something... ]
})
export class AppModule {
}

import { Component, ViewChild } from '@angular/core';
import { NgxY2PlayerComponent, NgxY2PlayerOptions } from 'ngx-y2-player';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('video') video: NgxY2PlayerComponent;
  videoId: 'z8WdQsPknf0'; // string or string array;
 
  playerOptions: NgxY2PlayerOptions = {
    height: 500, // you can set 'auto', it will use container width to set size
    width: 500,
    // when container resize, it will call resize function, you can custom this by set resizeDebounceTime, default is 200
    resizeDebounceTime: 0,
    playerVars: {
      autoplay: 1,
    },
    // aspectRatio: (3 / 4), // you can set ratio of aspect ratio to auto resize with
  };
  constructor() { }
 
  pause() {
    this.video.videoPlayer.pauseVideo();
  }
  play() {
    this.video.videoPlayer.playVideo();
  }
  stop() {
    this.video.videoPlayer.stopVideo();
  }
  go(second) {
    this.video.videoPlayer.seekTo(second, true);
  }
 
  onReady(event) {
    console.log('ready');
    console.log(event);
  }
 
  onStateChange(event) {
    console.log('change');
    console.log(event);
  }
}

export interface NgxY2PlayerOptions {
  width?: number | 'auto';
  height?: number | 'auto';
  playerVars?: YT.PlayerVars;
  host?: string;
  thumbnail?: THUMBNAIL_TYPE;
 
  resizeDebounceTime?: number;
  aspectRatio?: number;
}

type THUMBNAIL_TYPE = 
  '0.jpg' |
  '1.jpg' |
  '2.jpg' |
  '3.jpg' |
  'default.jpg' |
  'hqdefault.jpg' |
  'mqdefault.jpg' |
  'sddefault.jpg' |
  'maxresdefault.jpg';