Install

npm i ngx-youtube-player

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.

Breaking Change with v7

Angular Support

Starting with version 6, versions follow Angular's version to easily reflect compatibility.

Meaning, for Angular 11, use ngx-youtube-player @ ^11.0.0

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 https://orizens.com/contact

Installation

npm install 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 { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { YoutubePlayerModule } from "ngx-youtube-player";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppComponent } from "./app";

@NgModule({
  imports: [BrowserModule, YoutubePlayerModule.forRoot()],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(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 = "qDuKsiwS5xw";

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

Testing

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

Showcase Examples

• Echoes Player (github repo for echoes player)