npm i ngx-youtube-player

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.

Starting with version 17.1.0, YoutubePlayerComponent is a standalone component

Angular Youtube Component includes 2 optional licenses:

1. Free - for open source projects - includes standard play features, released under MIT license.
2. Commercial (Enterprize) - you must purchase a license, includes the following features:

• License types:
  • app developer ($200) - a license for each developer working with this component for one product only
  • platform developer ($550) - a license for each developer developer working with component for all products in one company

To purchase a license, please contact at https://orizens.com/contact

npm install 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{platformBrowserDynamic}from"@angular/platform-browser-dynamic";import{AppComponent}from"./app";bootstrapApplication(AppComponent);

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

import{Component}from"@angular/core"; @Component({standalone: true,selector: "app",template: ` <youtube-player [videoId]="id" (ready)="savePlayer($event)" (change)="onStateChange($event)" ></youtube-player> `,imports: [YoutubePlayerComponent]})exportclassAppComponent{player: YT.Player;privateid: string="qDuKsiwS5xw";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.

• Echoes Player (github repo for echoes player)