Integración de Librerías en Proyectos JavaScript

Integrar librerías de terceros en un proyecto con webpack no siempre es sencillo, especialmente cuando la librería elegida no fue diseñada para el flujo que necesitamos. Aquí se muestra paso a paso cómo instalar Modal Video desde NPM, conectarla con listeners ya existentes y resolver los problemas de CSS que aparecen al importar estilos de un paquete externo.

¿Cómo conectar los listeners con la librería Modal Video?

El punto de partida es un proyecto que ya captura el video ID de YouTube mediante listeners optimizados [01:00]. El siguiente paso es crear una función que reciba ese identificador y abra el modal correspondiente.

• Se crea un archivo separado llamado openModal.js para mantener el código organizado.
• La función se exporta como un named export, lo que obliga a importarla con la misma sintaxis: import { openModal } from './openModal' [03:18].
• Dentro de openModal, se recibe el videoId como parámetro y, por ahora, se imprime en consola para verificar que la conexión funciona.

Un detalle importante es el uso de template literals (comillas invertidas) para interpolar variables dentro de cadenas de texto [04:05]. Si se olvidan, la interpolación con ${} no funciona.

¿Por qué esta librería requiere un hack para funcionar con lazy loading?

La librería Modal Video se instala con npm install modal-video [01:42]. Sin embargo, su API no expone un método directo como .open(videoId). En cambio, funciona mediante una función constructora que necesita recibir una clase CSS o un elemento del DOM al que se le asigna un listener automático [05:08].

Esto genera un problema: no es compatible directamente con el patrón de lazy loading que se busca implementar. La solución es un hack que crea un botón fantasma en memoria [06:02]:

javascript const button = document.createElement('button'); button.dataset.videoId = videoId; new ModalVideo([button]); button.click();

• Se crea un elemento <button> con document.createElement.
• Se le asigna el videoId usando la propiedad dataset, que en JavaScript se accede como button.dataset.videoId en lugar de data-video-id del HTML [06:30].
• Se instancia ModalVideo pasándole un array con el botón como elemento a escuchar.
• Finalmente se ejecuta button.click() para forzar la apertura del modal de forma programática [07:05].

Este patrón de crear elementos en memoria y simular interacciones es útil cuando una librería no ofrece una API flexible.

¿Cómo resolver el problema de CSS con webpack loaders?

Al ejecutar el código, el modal aparece pero sin estilos [08:02]. La librería incluye su propio archivo CSS dentro de node_modules/modal-video/css/modal-video.min.css. Para importarlo basta con:

javascript import 'modal-video/css/modal-video.min.css';

Pero webpack no entiende CSS por defecto y lanza un error [08:45]. Se necesitan dos loaders:

• css-loader: permite a webpack interpretar archivos .css.
• style-loader: inyecta el CSS procesado dentro del bundle final.

Se instalan como dependencias de desarrollo:

bash npm install --save-dev style-loader css-loader

Y se configura una nueva regla en webpack.config.js [09:25]:

javascript module: { rules: [ { test: /.css$/i, use: ['style-loader', 'css-loader'] } ] }

La expresión regular /\.css$/i indica que la regla aplica a cualquier archivo que termine en .css, sin importar mayúsculas o minúsculas. El flag i se encarga de esa insensibilidad [09:50].

Tras reinstalar y ejecutar npm run dev, el modal se muestra correctamente con estilos aplicados [10:22]. Al hacer clic en cualquier elemento, se abre un modal funcional con el video de YouTube correspondiente.

El resultado es una integración que funciona al 90 %. Queda pendiente revisar por qué algunos videos muestran un error de reproducción dentro del modal, un reto ideal para practicar la depuración. ¿Te animás a investigar qué ajuste falta para que todos los videos carguen correctamente?