AngularYoutubeSdk

Angular 9 library for embedding YouTube player SDK.

Usage:

Install package

npm i @o.krucheniuk/angular-youtube-sdk -D

Import AngularYoutubeSdkModule into app.module.ts

import {AngularYoutubeSdkModule} from '@o.krucheniuk/angular-youtube-sdk'; imports: [ SharedModule, BrowserModule, AngularYoutubeSdkModule ],

Use component:

Add into app.component.html :

<youtube-player [videoId]="videoId" (stateChange)="stateChange($event)" (playerReady)="onPlayerReady($event)" #testPlayer></youtube-player>

<div> <input #videoIdInput type="text" value="Y1PVmANeyAg"/> <button (click)="changeVideo(videoIdInput.value)">change video</button> </div>

Add into app.component.ts:

videoId = 'QZXc39hT8t4';

@ViewChild('testPlayer', {static: true}) angularYoutubeSdkComponent: AngularYoutubeSdkComponent;

stateChange(e: PlayerStateChangeEvent) { console.log(e); }

onPlayerReady(e: PlayerStateChangeEvent) { this.angularYoutubeSdkComponent.player.playVideo(); // the same as e.target.playVideo(); }

changeVideo(value) { this.videoId = value; }

Stackblitz example

https://stackblitz.com/edit/angular-youtube-sdk?

API

All supported params from YouTube Player Params will be passed to the player constructor.