Este tutorial tiene como proposito exponer los pasos que hay que seguir para poder añadir videos de YouTube sin modificar tu diseño y adaptado a un entorno responsive.
Se instalará el paquete youtube-player utilizando el siguente comando npm:
npm install @angular/youtube-player
Importaremos el módulo YouTube Player modules en nuestro fichero app.module.ts (o en su defecto, en el módulo donde vayamos a aplicar directamente)
import { YouTubePlayerModule } from "@angular/youtube-player";
...
imports: [
....,
YouTubePlayerModule,
...
],
Una vez realizados los dos primeros pasos ya podemos agregar el componente del reproductor de YouTube en nuestro componente objetivo con el ID del video de YouTube. No os preocupeis, la id de identificación del video de YouTube se presentará en la propia URL como lo veremos en el siguiente ejemplo.
Si cogemos el video Implementación de una API en Python para enviar email con Angular encontramos el ID del video después de ?v=, es decir, RSGQuH_gWNw para el caso seleccionando.
<youtube-player
videoId="RSGQuH_gWNw"
suggestedQuality="highres"
[height]="250"
[width]="500"
[startSeconds]="4"
[endSeconds]="8">
</youtube-player>
<script src="https://www.youtube.com/iframe_api"></script>
El problema de este método, no es responsive. Para solucionarlo. añade el siguiente código en el componente:
import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
export class VideoyoutubeComponent implements AfterViewInit, OnDestroy {
@ViewChild('demoYouTubePlayer') demoYouTubePlayer: ElementRef<HTMLDivElement>;
videoWidth: number | undefined;
videoHeight: number | undefined;
constructor(private _changeDetectorRef: ChangeDetectorRef) { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.onResize();
window.addEventListener('resize', this.onResize);
}
onResize = (): void => {
// Automatically expand the video to fit the page up to 1200px x 720px
this.videoWidth = Math.min(this.demoYouTubePlayer.nativeElement.clientWidth, 1200);
this.videoHeight = this.videoWidth * 0.6;
this._changeDetectorRef.detectChanges();
}
ngOnDestroy(): void {
window.removeEventListener('resize', this.onResize);
}
}
Y añadiremos el siguiente código en la vista.
<div #demoYouTubePlayer class="demo-youtube-player">
<h1>Angular YouTube Player Demo</h1>
<section>
<youtube-player videoId="RSGQuH_gWNw" [width]="videoWidth" [height]="videoHeight"></youtube-player>
</section>
</div>