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.
En un componente standalone actual, importa YouTubePlayer directamente en el array imports del componente. YouTubePlayerModule sigue siendo útil para aplicaciones antiguas basadas en NgModule.
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. Carga de la API, placeholder y modo de privacidad
Con el paquete actual no necesitas añadir manualmente el script de la API iframe de YouTube en index.html. El componente lo carga cuando hace falta, mantiene inicialmente un placeholder ligero y puede cambiar el host del reproductor a youtube-nocookie.com mediante disableCookies.
5. Diseño responsive
El reproductor sigue necesitando dimensiones adaptadas al contenedor. ResizeObserver reacciona al ancho del componente sin registrar un listener global de resize y puede desconectarse limpiamente:
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.
Cuándo es mejor utilizar un iframe sencillo
Usa el componente Angular cuando necesites eventos de reproducción, controles programáticos, listas o sincronización de estado. Para una página de documentación que solo necesita reproducir un vídeo, un iframe directo es más sencillo, tiene menos piezas y puede hacerse responsive solo con CSS.
Accesibilidad y reproducción resistente a fallos
Da a cada iframe o placeholder un nombre accesible específico, conserva visible el foco de teclado y no inicies audio automáticamente. Añade un enlace normal al vídeo y un resumen textual para que el contenido siga funcionando si el vídeo es privado, no permite inserción, un bloqueador detiene la petición o la persona no puede reproducir contenido multimedia.
Si la aplicación controla la reproducción mediante la IFrame API, indica el origen de la página y gestiona errores como vídeos no disponibles o inserción desactivada por el propietario. El autoplay debe tratarse como opcional porque los navegadores pueden bloquearlo hasta que exista interacción.
Matriz de pruebas para producción
- La respuesta SSR contiene el encabezado, la explicación y el enlace alternativo antes de hidratar.
- El contenedor mantiene proporción 16:9 en móvil estrecho y escritorio ancho.
- Quienes usan teclado pueden alcanzar y activar el placeholder sin perder el foco.
- La página continúa siendo legible con scripts de terceros bloqueados y una red lenta.
- Las reglas de consentimiento y Content Security Policy permiten solo los dominios que necesita el embed elegido.
Referencias oficiales
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.