YouTube video player in Angular

In questo articolo vediamo come visualizzare un video di YouTube nella nostra applicazione Angular.

Specifico che la versione che sto usando è la 16, che è la minima richiesta dalla libreria che useremo: youtube-player!

Per installarla possiamo usare npm:

npm install @angular/youtube-player

Poi aggiungiamo il modulo in app.module.ts:

...........
import {YouTubePlayerModule} from '@angular/youtube-player';

@NgModule({
  declarations: [
    AppComponent,
    ...........
  ],
  imports: [
    ...........
    YouTubePlayerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Questo il nostro componente:

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-film',
  templateUrl: './film.component.html',
  styleUrls: ['./film.component.scss']
})

export class FilmComponent implements OnInit {

  @Input() videoId: string = 'FQZ7B7JTta4';

  apiLoaded = false;

  constructor() {}

  ngOnInit(): void {
    if (!this.apiLoaded) {
      const tag = document.createElement('script');
      tag.src = 'https://www.youtube.com/iframe_api';
      document.body.appendChild(tag);
      this.apiLoaded = true;
    }
  }

}

Come vedete ci serve solo l'ID del video, che corrisponde alla parte finale dell'url:

• url -> https://www.youtube.com/watch?v=FQZ7B7JTta4
• ID -> FQZ7B7JTta4

Infine l'HTML:

<div style="text-align: center">
    <youtube-player [videoId]="videoId" [height]="500" [width]="1000"></youtube-player>
</div>

Enjoy!