Home

Awesome

npm version npm downloads a month npm downloads a week

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

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

Installation

npm install ngx-youtube-player

Supported API

Currently supported attributes:

Inputs

outputs

DEMO

A Live Demo In StackBlitz

Usage

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