ng-youtube-iframe

Angular Tippy.JS Directive & Service

This is a wrapper around the Tippy.js. Easily create tooltips using a directive or utilize the service

Installation

Install Using NPM

  npm install --save angular-tippy

Adding Module

import { AppComponent } from './app.component';
import { AngularYoutubePlayerModule } from 'angular-youtube-player';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularYoutubePlayerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

*.component.html

<ng-youtube-player 
  (stateChange)="handleStateChange($event)"
  [config]="config">
</ng-youtube-player>

*.component.ts

  export class AppComponent {
    config: PlayerConfig;
    constructor() {
      this.config = {
        videoId: 'eP4j6GF6iM8',
        autoPlay: false
      };
    }

    handleStateChange(event) {
      // Do Something when state changes i.e pause / play
    }
  }

API

  interface PlayerConfig {
    videoId?: string;
    width?: string;
    height?: string;
    startSeconds?: number;
    autoPlay?: boolean;
    mediaContentUrl?: string;
    endSeconds?: number;
    suggestedQuality?: 'large' | 'medium' | 'small';
  }

  interface AngularYoutubePlayerComponent {
    @ViewChild('player') private player: ElementRef;
    @Input() config: PlayerConfig;
    @Input() videosList: string[];
    @Output() ready: EventEmitter;
    @Output() error: EventEmitter;
    @Output() stateChange: EventEmitter;
    @Output() playbackRateChange: EventEmitter;;
    @Output() playbackQualityChange: EventEmitter;
  }

PlayerConfig API

Property Name,Property Type,Description
VideoId,String,The id of the video that you would like to embed
Width,String,"The width of the video player, i.e '300px'"
Height,String,"The height of the video player, i.e '300px'"
startSeconds,Number,The start time in seconds
endSeconds,Number,The end time in seconds
autoPlayer,Boolean,If the video should auto play the video
mediaContentUrl,String,The url of the video you would like to embed
suggestQuality,'large'

AngularYoutubePlayerComponent API

Property,Type,Description
config,PlayerConfig,Configuration of the video player
videoList,string[],Array of video urls or ids
ready,EventEmitter,Notify when the video is ready
error,EventEmitter,Notify when an error has occured
stateChange,EventEmitter,Notify when the state of the player has changed
playbackRateChange,EventEmitter,Notify when the playback rate has changed
playbackQualityChange,EventEmitter,Notify when the playback quality has changed

License

Apache License Version 2.0, January 2004