lite-youtube
Para incrustar vídeos de YouTube en cualquier web cargando la miniatura primero y el iframe solo al hacer clic.
Web component ligero para incrustar vídeos de YouTube de forma rápida y sin penalizar el rendimiento.
Notas y contexto
Qué es
lite-youtube es un web component creado por Justin Ribeiro para incrustar vídeos de YouTube con mucho mejor rendimiento que el iframe oficial. Es la versión basada en Shadow DOM del conocido lite-youtube-embed de Paul Irish, escrita en TypeScript y sin dependencias externas.
Para qué sirve
- Incrustar vídeos de YouTube sin cargar el pesado iframe del reproductor hasta que el usuario hace clic.
- Mostrar primero una miniatura ligera con relación de aspecto 16:9 responsive.
- Mejorar las métricas de carga y Core Web Vitals en páginas con vídeo.
- Soportar YouTube Shorts y personalizar estilos mediante CSS custom properties.
Cuándo usarlo
Es ideal cuando necesitas mostrar uno o varios vídeos de YouTube sin sacrificar el tiempo de carga, especialmente en landing pages, blogs o documentación. Al ser un custom element estándar, funciona en cualquier framework o en HTML plano. Como alternativa existe lite-youtube-embed de Paul Irish (sin Shadow DOM); esta versión aporta encapsulado de estilos y soporte de Shorts.
Ejemplo
Instalación vía npm:
npm i @justinribeiro/lite-youtubeUso básico en HTML tras importar el componente:
<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>O directamente desde CDN, sin paso de build:
<script src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1/lite-youtube.min.js"></script>Puntos clave
- Sin dependencias y empaquetado como custom element estándar reutilizable en cualquier stack.
- Usa Shadow DOM para aislar estilos y carga el iframe de forma diferida (lazy load) mediante Intersection Observer.
- Soporta accesibilidad por teclado y atributos ARIA, personalización de locale y de la relación de aspecto.
Ten en cuenta
Proyecto activo y con licencia MIT. Al apoyarse en web components y Shadow DOM, conviene comprobar la compatibilidad con tu sistema de estilos si necesitas inyectar CSS desde fuera del componente. Para entornos sin necesidad de encapsulado, lite-youtube-embed de Paul Irish puede ser una opción más sencilla.