Install

npm i ngx-youtube-player

Angular Youtube Player Component (Standalone)

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.

Breaking Change with v17

| Before < v17 | After >= v17.1.0 |
| --------------------- | ---------------------------------- |
| YoutubePlayerModule.forRoot() | as standalone version |

Angular Support

Starting with version 17.1.0, YoutubePlayerComponent is a standalone component

LICENSE

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

Installation

npm install ngx-youtube-player

Supported API

Currently supported attributes:

$3

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

$3

- 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:

``typescript
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:

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

@Component({
standalone: true,
selector: "app",
template:
[videoId]="id"
(ready)="savePlayer($event)"
(change)="onStateChange($event)"
>
,
imports: [YoutubePlayerComponent]
})
export class AppComponent {
player: YT.Player;
private id: string = "qDuKsiwS5xw";

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

Testing (DISABLED)

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.

Showcase Examples

- Echoes Player (github repo for echoes player)