Nuclear Power Manager

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.31 • Public • Published

    Build Status

    IMPORTANT - (RENAMED and moved)

    Package RENAMED to ngx-youtube-player (Angular 4+)

    Angular Youtube Player Component

    This is an angular 2 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.

    Angular 2 Support

    Updated to support Angular - Final > 4


    Angular 2 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:
    • standard play features
    • playlist support (without ads)
    • auto play next track in playlist
    • upgrades for 1 year
    • online support for 1 year
    • 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


    npm install ng2-youtube-player --save-dev

    Supported API

    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 Plnkr


    First, import the YoutubePlayerModule to your module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { YoutubePlayerModule } from 'ng2-youtube-player';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppComponent } from './app';
      imports:[ BrowserModule, YoutubePlayerModule ],
      declarations: [ AppComponent, ],
      bootstrap: [ AppComponent ]
    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';
        selector: 'app',
        template: `
    export class AppComponent {
      player: YT.Player;
      private id: string = 'qDuKsiwS5xw';
        savePlayer (player) {
        this.player = player;
        console.log('player instance', player)
        console.log('player state',;


    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


    npm i ng2-youtube-player

    DownloadsWeekly Downloads






    Last publish


    • orizens