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

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

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

npm install @hercilio/ngx-youtube-player

Currently supported attributes:

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

• 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

A Live Demo In StackBlitz

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);
  }
}

To start developing tdd/bdd style: npm run dev This will: compile ts files, watch for changes and start the test task. Whenever a ts file is changed, it will rerun the tests.

Travis-ci is integrated

• npm run build:lib
• cd dist/ngx-youtube-player
• npm publish --access public

• Echoes Player (github repo for echoes player)