¿Alguna vez has querido mostrar una lista de reproducción de videos en tu sitio web con un diseño profesional similar a YouTube? En este tutorial te enseño a crear una galería de videos completamente funcional usando solo Divi Builder, sin necesidad de plugins adicionales.
¿Qué vamos a crear?
Una galería de videos moderna y responsive que incluye:
- Video principal en la columna izquierda que reproduce contenido de YouTube o Vimeo
- Lista lateral con miniaturas de todos los videos
- Cambio automático al siguiente video cuando termina la reproducción (aplica para algunos navegadores)
- Diseño tipo YouTube con miniaturas, duración y descripciones
- Scroll vertical en la lista cuando tienes muchos videos
¿Qué haremos en este tutorial?
- Estructurar módulos de código en Divi Builder para componentes interactivos
- Integrar videos de YouTube y Vimeo mediante enlaces
- Usar JavaScript para crear interactividad entre elementos
- Detectar eventos de reproducción de videos de YouTube/Vimeo
- Aplicar CSS personalizado con clases prefijadas para evitar conflictos
- Crear interfaces responsive que se adaptan a móviles y tablets
¿Para qué puedes usar esta galería?
Esta solución es extremadamente versátil y se adapta a múltiples casos de uso:
Academia o cursos online: Organiza las lecciones de tu curso en una lista ordenada donde los estudiantes pueden navegar fácilmente entre módulos.
Portfolio de videógrafo: Muestra tus trabajos audiovisuales de forma profesional sin depender de embeds externos limitados.
Tutoriales paso a paso: Ideal para sitios de educación donde necesitas presentar una secuencia de videos instructivos.
Lista de reproducción de productos: Si vendes productos con video demostraciones, esta galería permite que tus clientes vean todas las variantes sin salir de tu sitio.
Blog de cocina o recetas: Presenta tus recetas en video de forma organizada y atractiva.
Canal de música o podcast: Comparte tus episodios o tracks musicales con un reproductor elegante.
Testimonios en video: Muestra casos de éxito de clientes de forma más dinámica que el típico carrusel.
Ventajas de esta solución
Sin plugins externos: No dependes de plugins de terceros que pueden dejar de actualizarse o crear conflictos.
Control total: Puedes personalizar cada aspecto del diseño según tu marca.
Rendimiento optimizado: Solo cargas el código necesario, sin funciones adicionales innecesarias.
Compatible con YouTube y Vimeo: Flexibilidad para usar ambas plataformas en la misma galería.
Fácil de mantener: Solo necesitas actualizar un array de JavaScript para agregar o quitar videos.
SEO friendly: Los títulos y descripciones son texto HTML indexable por buscadores.
Requisitos previos
- Tener Divi instalado y activado
- Conocimientos básicos de Divi Builder
- Acceso a las opciones del tema de Divi para agregar CSS personalizado
- Videos publicados en YouTube o Vimeo (no necesitas API keys)
Estructura del proyecto
El tutorial está dividido en tres partes simples:
- CSS Global: Estilos que pegas una sola vez en las opciones del tema
- Estructura HTML: Dos módulos de código en columnas separadas
- JavaScript: Configuración de videos y lógica de funcionamiento
Lo mejor de todo es que una vez configurado, solo necesitas editar el array de videos para agregar nuevo contenido. No hay necesidad de tocar el código complejo cada vez.
0 comentarios