Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@hercilio/ngx-youtube-player

Hernior29118.2.13TypeScript support: included

Build Status npm version [![npm d

angular, angular-14, angular-15, angular-16, angular-17, youtube, video, player

readme

Build Status npm version npm downloads a month npm downloads a week

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. Original project: https://github.com/Hernior/ngx-youtube-player

Angular Support

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

LICENSE

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

Installation

npm install @hercilio/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 { 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);
  }
}

Showcase Examples

changelog

v 12.0.1 (2020/09/23)

  • [FIX] - apply pr #80 fix - allow multiple instances

v 12.0.0 (2020/09/23)

  • [CHORE] - upgrade to latest v12.0.

v 11.0.0 (2020/09/23)

  • [CHORE] - upgrade to latest v11.0.

v 10.2.0 (2020/09/23)

  • [CHORE] - upgrade to latest v10.2

v 9.1.0 (2020/09/23)

  • [CHORE] - upgrade to latest v9
  • [FIX] - allow mutiple instances fix #80

v 7.1.5 (2020/04/17)

  • [CHORE] - adding scarf as a dependency

v 7.1.4 (2020/04/15)

  • [CHORE] - adding scarf to published package

v 7.1.3 (2020/04/15)

  • [CHORE] - updating package name to display info on npm

v 7.1.2 (2020/04/12)

  • [CHORE] - added scarf for stats

v 7.1.1 (2019/03/27)

  • [NEW] - now using "NgxYoutubePlayerModule" as the module name
  • [NEW] - now using "forRoot" for module
  • [UPGRADE] - official support for Angular 7, rxjs 6.3.3
  • [CHORE] - now using official angular library

v 6.0.0 (2018/05/30)

  • [UPGRADE] - official support for Angular 6, rxjs 6
  • [REFACTOR] - "@types/youtube" is a dependency now
  • [REFACTOR] - Inputs height & width are assigned with the default sizes now

v 0.1.0 (2018/01/08)

  • [UPGRADE] - official support for Angular 5
  • [UPDATE] - updated repo to ngx-youtube-player
  • [REFACTOR] - added more unit tests and increased coverage

v 0.0.51 (2017/12/29)

  • [FIX] - fixes #27 - youtube player iframe api loaded with each instance

v 0.0.4 (2017/10/03)

  • RENAMED npm package to "ngx-youtube-player"
  • updated to be usign Renderer2 for DOM Access to support NodeJS
  • fixes #8

v 0.0.3 (2017/05/15)

  • updated to work with ng4
  • auto setting for youtube player api protocol (http or https)
  • using angular-library-starter
  • added support for "http" method

v 0.0.2 (2017/03/29)

  • added examples

v 0.0.1 (2017/05/10)

Updates

  • First release