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.
6. Resultado
7. Rendimiento y SEO
Insertar un reproductor de YouTube añade un iframe externo, peticiones de red y JavaScript fuera del bundle de Angular. En una pagina tutorial es aceptable, pero en paginas con mucho contenido conviene cargar el reproductor solo cuando el video se acerca al viewport.
Para SEO, deja la explicacion en HTML normal antes del iframe. Google entiende mejor el texto, los encabezados y los ejemplos de codigo que rodean al video aunque el video este alojado fuera.
Estrategia de carga diferida
Si la pagina contiene varios videos, el mejor patron es renderizar primero un placeholder ligero y crear el reproductor real solo cuando el usuario pulsa o cuando el bloque se acerca al viewport. Asi se evita cargar la API iframe de YouTube para visitantes que solo leen el articulo.
El placeholder debe conservar la misma proporcion que el reproductor final, incluir una etiqueta accesible en el boton y mantener suficiente contexto en el texto cercano. De esa forma la pagina sigue estable, legible e indexable aunque el elemento pesado se retrase.
Errores habituales de implementacion
El error mas comun es mezclar ancho fijo y contenedores responsive. Un reproductor con width 500 puede verse bien en escritorio y desbordar en movil. Otro fallo frecuente es inicializar el reproductor antes de que el contenedor tenga un ancho medible, lo que genera dimensiones incorrectas hasta el siguiente resize.
En produccion conviene probar el componente con SSR, movil, red lenta y navegadores con privacidad estricta. Algunos usuarios bloquean scripts multimedia de terceros, asi que el articulo debe seguir teniendo sentido aunque el iframe no cargue.
Privacidad y consentimiento
Los embeds de YouTube pueden establecer cookies de terceros o lanzar peticiones externas segun la configuracion y la region. Si la pagina es sensible a privacidad, usa el dominio nocookie, retrasa el iframe hasta la interaccion y explica que el video esta alojado por un proveedor externo.
Checklist de implementacion
- Usa un componente reutilizable en vez de duplicar iframes.
- Mantén una proporcion estable para que el layout no salte al cargar.
- Añade un titulo o parrafo visible que explique el contenido del video.
- Evita anchos fijos en pixeles para vistas moviles.
- Usa carga diferida cuando haya varios videos en el mismo articulo.