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 instalara el paquete youtube-player utilizando el siguiente comando npm:
2. Importar la libreria.
Importaremos el modulo YouTube Player en nuestro fichero app.module.ts o, en su defecto, en el modulo donde vayamos a aplicar directamente.
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. La identificacion del video se presenta en la propia URL como 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 despues de ?v=, es decir, RSGQuH_gWNw.
El codigo ejemplo para la URL https://www.youtube.com/watch?v=RSGQuH_gWNw seria:
Detalles del resto de los parametros
Por si te interesa, la libreria dispone de los siguientes parametros:- 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
5. Diseño responsive
El problema de este metodo es que no es responsive. Para solucionarlo, añade el siguiente codigo en el componente:
Y añadiremos el siguiente codigo en la vista.