Integrate Youtube player in React

Command

npm i ngx-youtube-player


app module

import {NgxYoutubePlayerModule} from 'ngx-youtube-player';

NgxYoutubePlayerModule.forRoot()


In App.ts file: 

player: YT.Player | undefined;

  private id: string = 'qDuKsiwS5xw';

 

  savePlayer(player:any) {

    this.player = player;

    console.log('player instance', player);

  }

  onStateChange(event:any) {

    console.log('player state', event.data);

  }


In App.html file  

<youtube-player

      [videoId]="id"

      (ready)="savePlayer($event)"

      (change)="onStateChange($event)"

    ></youtube-player>

<router-outlet></router-outlet>


























  

  

Comments