Angular, como añadir videos de Youtube de forma responsive.

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.

1. Instalar el paquete @angular/youtube-player

Se instalará el paquete youtube-player utilizando el siguente comando npm:

npm install @angular/youtube-player

2. Importar la librería.

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,
  ...
  ],

3. Componente YouTube Player en el HTML

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.

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.

El código ejemplo para la url a href="https://www.youtube.com/watch?v=RSGQuH_gWNw"> https://www.youtube.com/watch?v=RSGQuH_gWNw seria:

 <youtube-player
  videoId="RSGQuH_gWNw"
  suggestedQuality="highres"
    [height]="250"
    [width]="500"
    [startSeconds]="4"
    [endSeconds]="8">
    </youtube-player>

Detalles del resto de los parámetros

Por si te enteresa, la libreria dispone de los siguientes parámetros:

videoId: texto — El ID del video de Youtube que vamos a mostrar.
height: número —Altura del reproductor del video
width: número —Ancho del reproductor del video
startSeconds: número — Momento en el que queremos que el reproductor empiece a reproducir.
endSeconds: número— Momento en el que queremos que el reproductor termine de reproducir. El número corresponde al segundo del video donde finalizará.
suggestedQuality:— La calidad sugerida en el reproductor. Tendremos los siguientes valores disponibles 'default' , 'small', 'medium', 'large', 'hd720', 'hd1080' y 'highres',
showBeforeIframeApiLoads: boolean— El iframe intentará cargarse independientemente del estado de la API en la página. Establecemos esto como verdadero si no deseamos que el campo onYouTubeIframeAPIReady se establezca en la ventana global.

4. Añadiendo el script en el index.html

  <script src="https://www.youtube.com/iframe_api"></script>

5. Diseño responsive

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>