Angular Library to play background youtube video

Introduction

ngx-youtube is an angular library that makes it easy to use youtube embed to play a background video. It has a simple and clean api which makes it very user friendly.

ngx-youtube also provides some great features such as display cover video is ready to be played.

This library is perfect for anyone who wants to add a little extra flair to their website by adding a background youtube video.

Also this library respect accessibility criteria by respecting prefers-reduced-motion browser option and give possible to stop this video.

Installation

Package is available on npm.

npm install --save @ngx-yanis/ngx-youtube

After installing the package, you have to import NgxYoutubeModule On your own module

import { NgxYoutubePlayerModule } from '@ngx-yanis/ngx-youtube';

@NgModule({
  imports: [
    ...
    NgxYoutubePlayerModule
  ]
})
export class AnyModule { }

Usage

On your Component, you can use the following code:

@Component()
export class NgxYoutubeDemoComponent {
  isRead = false;

  onReadyChange($event: boolean) {
    this.isRead = $event;
  }
}

On your HTML file you can use the following code:

<ngx-youtube-player [youtubeId]="'Bc_RrCNWTyo'" (readyChange)="onReadyChange($event)">
    <img class="cover" [ngClass]="{loaded: isReady}" src="https://i.ytimg.com/vi/Bc_RrCNWTyo/maxresdefault.jpg" alt="">
  </ngx-youtube-player>

HTML element with the class cover will be interpolate on the overlay. it will be displayed until video start playing.

You may notice a delay between page load and video playing. Player wait 4 seconds starting, goal is to mask Youtube interface.