Angular 9 — Como añadir videos de Youtube en unas sencillos pasos

Pasos a seguir para poder hacer uso YouTube Player Component y visualizar videos de Youtube en nuestras apps de Angular

Angular 9 — Como añadir videos de Youtube en unas sencilos pasos

Pasos a seguir para poder hacer uso YouTube Player Component y visualizar videos de Youtube en nuestras apps de Angular

El propósito de este artículo es enseñaros como añadir el reproductor de Youtube con el video seleccionado de una manera muy fácil.

Como bien sabréis, seguramente habréis experimentado “la agradable sensación” de tener que configurar con bastante esfuerzo todo el apartado para poder visualizar videos de Youtube en Angular.

Esto nos ha ocurrido hasta la versión 8.2 donde teníamos que hacer uso del Dom Sanitizer, para poder “desinfectar” nuestra app frente a ello, para poder trabajar con un iframe.

Desde la versión 9 de Angular, por suerte, este quebradero de cabeza ha pasado a mejor historia. Empecemos.

0.- Necesario

• Tener creado el proyecto de Angular (versión 9) y disponible para trabajar.

1.- Instalar el paquete de Youtube

Instalaremos el paquete de YouTube player en npm ejecutando el siguiente comando estando ubicados en el directorio raíz de nuestro proyecto de Angular.

npm install @angular/youtube-player

2.- Importar el módulo YoutubePlayer

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 pasamos, ya podemos agregar el componente del reproductor de YouTube en nuestro componente objetivo (app.component en este caso) como se muestra a continuación con el ID del video de YouTube.

Podemos obtener fácilmente cualquier identificación desde video de YouTube seleccionado. La identificación del video de YouTube se presentará en la propia URL.

3.1.- URL del ejemplo — ¿Qué es GraphQL?:

[https://www.youtube.com/watch?v=80_Cr9m-1fE](https://www.youtube.com/watch?v=80_Cr9m-1fE)

Dentro de la URL, encontramos el ID del video después de ?v= que es 80_Cr9m-1fE. Teniendo esto como referencia, añadimos el siguiente código con las siguientes configuraciones que explicaré detalladamente posteriormente.

4.2.- Añadiendo el script en el componente que usaremos

5.- Resultado

A continuación os muestro como se vería nuestro resultado.

https://angular-youtube-demo.stackblitz.io

6.- Crear nuestro ejemplo

Ahora que sabemos como configurar y como añadir el reproductor de Youtube de una manera sencilla, ¡vamos a intentarlo por nuestra cuenta! ¡Ánimo!

Gracias por leer este artículo, espero que te haya sido útil y puedas compartirlo con la mayor gente posible, para poder dar opción a otras personas de disfrutar de este tipo de contenido.

Si no me sigues, te invito a hacerlo ;)

7.- Contacto

• Medium: https://medium.com/@mugan86
• Udemy: https://www.udemy.com/user/anartzmugika/
• Twitter: https://twitter.com/mugan86
• Instagram: https://www.instagram.com/anartz.mugika.ledo/
• Telegram: https://t.me/anartzmugika

Canonical link