Angular Youtube Player Component

This is an Angular component based on youtube player iframe api. This component came out as a result of the open source project Echoes Player - an alternative player for watching and listening to media from youtube. Original project: https://github.com/Hernior/ngx-youtube-player

Angular Support

Compatible with Angular v14 or later, versions follow Angular's version to easily reflect compatibility. Starting with Angular v14.2.5.

LICENSE

This fork project is free to use, released under MIT license.

Installation

npm install @hercilio/ngx-youtube-player

Supported API

Currently supported attributes:

Inputs

• height (number) - optional height for the player
• width (number) - optional width for the player
• videoId (string) - will load the specified video by id

outputs

• ready (YT.Player) - implements youtube's player onReady event -> sends a the new created yt player instance
• change - a state change event channeling the youtube's player instance state event object

DEMO

A Live Demo In StackBlitz

Usage

First, import the YoutubePlayerModule to your module:

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

...

@NgModule({
  ...
  imports: [..., NgxYoutubePlayerModule.forRoot()],
  ...
})
export class AppModule {}

Next, use the youtube-player component. A Unique Id will be created for this player's instance:

import { Component } from "@angular/core";

@Component({
  selector: "app",
  template: `
    <youtube-player
      [videoId]="id"
      (ready)="savePlayer($event)"
      (change)="onStateChange($event)"
    ></youtube-player>
  `,
})
export class AppComponent {
  player: YT.Player;
  private id: string = "L-odCf4MfJc";

  savePlayer(player) {
    this.player = player;
    console.log("player instance", player);
  }
  onStateChange(event) {
    console.log("player state", event.data);
  }
}

Showcase Examples

• Echoes Player (github repo for echoes player)