El vídeo es una herramienta de marketing muy efectiva y, si se integra bien en una web, puede llegar a ser un buen instrumento para captar clientes.

Insertar un vídeo en Divi es muy sencillo. Puedes añadir directamente un módulo de vídeo al constructor, puedes utilizar un vídeo de fondo, insertar un vídeo de Youtube o Vimeo en tu web…

En este post vamos a ver las distintas opciones para poner un vídeo en la Home o en cualquier ubicación de tu web y que quede completamente integrado con el diseño y estilo de tu marca.

Utilizar el Módulo Vídeo de la plantilla Divi

Es la opción más directa de subir un vídeo a una web con Divi, ya que la plantilla dispone de un Módulo específico para ello.

En este caso, es tan sencillo como abrir la edición de la página que quieras diseñar, activar el constructor Divi, añadir una nueva sección estándar, y por último, añadir el Módulo Vídeo.

A continuación, entra en los ajustes del Módulo. Lo primero que te aparecerá serán dos campos donde meter los enlaces de tu vídeo, tanto en MP4 como en WEBM. Todos los vídeos que subas a Divi deberían estar en ambos formatos para asegurar la máxima compatibilidad con todos los navegadores.

Para convertir tu enlace de vídeo de MP4 a WEBM puedes usar esta web (en el caso de los vídeos de Youtube, no tiene autorización para convertirlos).

WordPress te permite subir archivos de máximo 32 MB, aunque no es recomendable saturar tu web con archivos tan pesados que puedan afectar negativamente a la velocidad de carga y quizás es mucho más aconsejable insertar directamente el enlace.

Esa es la otra opción que puedes usar. Simplemente copia el enlace del vídeo que quieres mostrar y pégalo en el campo anterior. Tan sencillo como eso.

Por último, personaliza el vídeo de tu web en Divi con las diferentes opciones que incluye el Módulo; capa superpuesta, tamaño, separación, borde, animación…

Utilizar el Módulo Slider de Vídeo de la plantilla Divi

De igual manera que la plantilla Divi incluye un Módulo de Vídeo, también incluye un Módulo de Control deslizante de Vídeo, es decir, un módulo para añadir un slider con varios vídeos a Divi.

El funcionamiento es igual que en el caso anterior. Una vez que hayas activado el constructor de Divi, añade una nueva sección estándar y, a continuación, el Módulo de Control deslizante de Vídeo (la traducción no es muy acertada).

Después, entra en los ajustes del módulo y lo primero que te aparecerá será un icono desde el que podrás ir añadiendo uno a uno cada vídeo que desees insertar en el slider de tu web.

Una vez, hayas añadido cada vídeo, ya sea subiendo los archivos o pegando los enlaces externos, te aparecerá el listado en las opciones del módulo. Desde aquí podrás acceder a las opciones de personalización de cada uno y podrás añadir una capa superpuesta, cambiar el color de las flechas o filtros.

Puedes diseñar el slider con vídeos para se muestre uno en destacado con las miniaturas o thumbnails ubicadas abajo o también puedes añadir un diseño por puntos de navegación, donde solo se va mostrando uno de los vídeos en destacado.

En el diseño de las miniaturas se mostraría de la siguiente forma.

Añadir un vídeo de fondo en Divi

Antes de nada, conviene que sepas, que aunque a priori parezca un elemento muy llamativo en tu web, los vídeos pueden ralentizar considerablemente tu sitio web y además, servir como distracción al resto de contenido.

Por lo tanto, si crees que hay alguna imagen que pueda aportar el mismo valor que lo haría el vídeo, opta por la imagen.

Aún así, si es tu mejor opción y quieres conocer cómo añadir un vídeo de fondo en una web con Divi, ¡es my sencillo!

Este constructor web permite agregar un fondo con vídeo, tanto en las secciones como en las filas, columnas y en la mayoría de los módulos: título de ancho completo, menú de ancho completo, contadores de barra, llamada a la acción, controles deslizantes, testimonios, texto…

¿Y cómo? Simplemente tienes que entrar en las opciones del módulo, sección, fila o columna. Y en el apartado de «fondo», elegir la pestaña con el icono de vídeo, y a continuación, clicar en el icono del símbolo +.

Desde aquí puedes insertar un vídeo tuyo ya subido a WordPress (MP4 y WEBM) o puedes insertar la url externa.

Eso sí, asegúrate de que el vídeo está en los formatos indicados (no es posible subir vídeos de Youtube o Vimeo) y están libres de derechos, como por ejemplo, vídeos procedentes de videvo, coverr o videezy (gratuitos) o vídeos de videohive, videoblocks o pond5 (de pago).

En las opciones siguientes puedes personalizar las dimensiones del vídeo y las opciones de pausa: pausar el vídeo cuando se está reproduciendo otro en la misma página o pausar el vídeo mientras no se está visualizando.

Por último, si en formato móvil no se muestra correctamente el vídeo, agrega una imagen de fondo como respaldo ya que los dispositivos móviles no reproducirán automáticamente videos de gran tamaño.

3 Consejos para opimizar los vídeos de tu web

Estas son algunas de las recomendaciones generales que deberías tener en cuenta a la hora de poner tu vídeo en una web:

•  En ocasiones se recurre al vídeo pensando que la web será más completa, pero el resultado final es una web lenta, con un vídeo que no aporta verdadera ayuda, con una duración prolongada o con una resolución inadecuada. Por lo tanto, se recomienda subir solamente vídeos a tu web cuando tengan la calidad suficiente para mostrarse, no afecten a la velocidad de carga y cuando sean realmente necesarios, como puede ser el caso de la presentación de una empresa, modo de utilización de un producto, mini tutorial… Aquí puedes leer acerca de reduir los megas de un vídeo sin perder calidad.
• Cuando utilices la opción de vídeos de fondo, elimina el audio para que se reduzca el tamaño del archivo.
• Igualmente, para poner un vídeo de fondo, prueba a cambiar las opciones de «Filtros» en el apartado de diseño del módulo, de manera que la imagen necesite menos calidad y por lo tanto, vaya más fluido.
• Cuando necesites colocar una capa superpuesta, es decir, la imagen principal que quieres mostrar antes de la reproducción del vídeo, con Divi tienes dos opciones: subir una nueva imagen desde los Medios de WordPress o clicar en el botón de Generar desde vídeo, para que automáticamente tome una imagen del vídeo.

• En cuanto a las dimensiones para insertar un vídeo en Divi, no existe una regla firme, ya que todos los vídeos y sitios web son diferentes. En definitiva, el vídeo debe ser lo más cercano al ancho de la columna en la que lo quieres ubicar. Por ejemplo, si tienes una columna de ancho completo con 1080px de máximo, entonces el vídeo no debería necesitar una resolución mayor a 720px (1280 × 720).
• Elige siempre el formato correcto para subir un vídeo a Divi. Las opciones son, insertar un vídeo desde una plataforma externa, como Youtube o Vimeo, o tener alojado tu propio vídeo en formato MP4 o WEBM; MP4 es actualmente el formato más compatible con los distintos navegadores y WEBM es el segundo formato más compatible. Fue construido para la web y parece estar aquí para quedarse. Produce transmisión de alta calidad y es de código abierto.
• Por último, si lo que necesitas es integrar un vídeo de Youtube o Vimeo en tu web con Divi, recuerda que debes buscar el enlace para «Compartir» externamente o para insertar el código, tal y como ves en la siguiente imagen:

Algunos códigos para personalizar un vídeo en tu web con Divi

Aunque la plantilla Divi incluye una gran cantidad de opciones para incrustar un vídeo en tu web, hay algunas otras que se pueden añadir con ayuda de un pequeño código.

Reproducir el vídeo una sola vez

Por defecto, cuando añades un vídeo a Divi, se reproducirá en bucle una y otra vez. Y si por cualquier causa, solo quieres que se reproduzca una vez y a continuación se pause, necesitarás ir a Divi > Opciones del tema > Integrations > Head y pegar el siguiente código:

[pastacode lang=»javascript» manual=»%3Cscript%3E%0A(function(%24)%20%7B%0A%20%20%20%20%24(document).ready(function()%20%7B%0A%20%20%20%20%20%20%20%20%24(‘.no-loop%20.et_pb_section_video_bg’).each(function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(this).find(‘video’).removeAttr(‘loop’)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%7D)(jQuery)%3B%0A%3C%2Fscript%3E» message=»» highlight=»» provider=»manual»/]

Modificar el tamaño del botón de reproducción

Entra en los ajustes del módulo, en Avanzado -> CSS Personalizado -> Botón de reproducción y en este campo pega el siguietne código. Después modifica los valores según tur preferencias.

[pastacode lang=»css» manual=»Font-size%3A%2010rem%3B%0ALine-height%3A%2010rem%3B%0AMargin-top%3A%20-5rem%3B%0AMargin-left%3A%20-5rem%3B» message=»» highlight=»» provider=»manual»/]

Con todas estas formas de añadir vídeos en Divi, ya tienes otro recurso con el que personalizar y mejorar el diseño de tu web. Cualquier otra idea, truco o sugerencia que tengas, no dudes en dejarla en los comentarios 😉