angular-youtube-player

Angular Embedded YouTube Player Component Module

An Angular component module for using the embedded YouTube (iframe) player.

This is used in a few YouTube projects including AdBlitz 2018.

See Also

• Other component libraries

Installation

npm install angular-youtube-player

Importing the module

In the module (e.g. AppModule) where it will be used:

/* ... */
import { YTPlayerModule } from 'angular-youtube-player';

@NgModule({
  /* ... */
  imports: [
    YTPlayerModule,
    BrowserModule
  ]
})
export class AppModule { }

Config

There are two options are currently configurable:

// config
imports: [
  YTPlayerModule,
  BrowserModule
],
providers: [{ provide: YTPlayerConfig, useValue: { shouldLoadAPI: true, multiplePlaying: false } }],

You could use either the constructor:

import { YTPlayerConfig } from 'angular-youtube-player';

const useValue = new YTPlayerConfig(shouldLoadAPI, multiplePlaying);

or an object literal:

const useValue = { shouldLoadAPI: true, multiplePlaying: false };

to build the config, both values are optional.

shouldLoadAPI = true

By default using this module would load the YouTube iframe player API, if you prefer to load it on your own, you could set it to false. Note that it would still require the API to be loaded.

multiplePlaying = false

When there are multiple instances of the player, it would only allow one to be playing by default (i.e. playing one would pause the other playing ones). You could set this to true if you want to allow multiple videos playing at the same time.

Using the component

Here's a list of the component's input and output properties:

@Input() videoId: string;
@Input() domId: string;
@Input() parameters: string|YT.PlayerVars;

@Output() ready = new EventEmitter();
@Output() unstarted = new EventEmitter();
@Output() ended = new EventEmitter();
@Output() playing = new EventEmitter();
@Output() paused = new EventEmitter();
@Output() buffering = new EventEmitter();
@Output() cued = new EventEmitter();

Input

videoId

The YouTube video id to play

domId (optional)

The DOM element id of the player

parameters (optional)

The player options, could be a query string or a object

Reference on IFrame Player Parameters

Output

The output events are all from the IFrame Player API.

Other public properties and methods

public get currentTime(): number
public play(): void
public pause(): void
public cueVideoById(videoId: string, startSeconds?: number): void
public loadVideoById(videoId: string, startSeconds?: number): void