Guía definitiva para usar video con Divi

Explorando el módulo de video

El módulo de video le permite incrustar videos en su página desde casi cualquier fuente. La documentación de Divi sobre el módulo de video explica todas las características y cómo agregar un video a su página. Pero para esta publicación, voy a profundizar un poco más.

Adición de un video autohospedado al módulo de video

Para agregar un video autohospedado con el módulo de video, debe cargar un video o agregar una URL al archivo de video dentro de la configuración de Video. Y debe agregar su video en dos formatos de archivo.

Y eso es todo lo que realmente necesitas hacer. Suficientemente simple.

Sin embargo, detrás de escena, Divi está usando el elemento de video HTML5 para mostrar el video. Cuando elige agregar un video autoalojado o cargar su propio video usando los formatos mp4 y webm, la estructura del código que implementa Divi se parece a la siguiente:

Aquí hay algunas cosas que quiero señalar sobre lo que está haciendo este código:

1. Observe el atributo de controles dentro de la etiqueta <video>. Esto le dice al video que muestre los controles. Suficientemente simple.
2. Observe las dos etiquetas <source> dentro de las etiquetas <video> de apertura y cierre. Las fuentes consisten en archivos de video. El primero es un mp4 y el segundo es un formato de archivo webm . Ambos son necesarios para obtener la máxima compatibilidad con el navegador. El orden también es importante. Desea que el navegador vea el mp4 primero, ya que es el más compatible universalmente. Discutiré más sobre estos formatos más adelante.
3. La línea que dice «Error al cargar este recurso» se mostrará si los dos primeros formatos no se reconocen.
4. Lo que no puede ver es que Divi ha diseñado esta etiqueta <video> y le ha dado un ancho del 100 % para que responda, de modo que su video se ajuste al ancho de la columna en la que se encuentra.

Este elemento de video HTML5 está creciendo como la nueva forma estándar de mostrar videos en la web. Afortunadamente, Divi se encarga de esto por nosotros.

Superposición de imagen de video autohospedado

Además de la opción de agregar sus videos al módulo de video, Divi también le permite agregar una imagen de superposición personalizada para su video.

Si elige agregar una imagen superpuesta a su video autohospedado, debe cargar la suya propia. La opción de generar la imagen a partir de un video solo se aplica a URL de videos alojados por terceros, como Youtube y Vimeo.

Debido a que la imagen tendrá el tamaño del video y debido a que el video se ajustará al tamaño de la columna en la que se encuentra, es importante elegir el tamaño de imagen correcto. Los videos de Youtube, Vimeo y la mayoría de los demás formatos suelen tener una relación de aspecto de 16:9. Entonces, si tiene el ancho máximo de contenido establecido en el valor predeterminado de Divi de 1080 px, luego, siguiendo la relación de aspecto 16: 9, su video tendrá las dimensiones de 1080 × 608. Por lo tanto, su imagen de superposición debe ser de 1080 × 608 píxeles.

El botón de reproducción

Una vez que se haya configurado su imagen, Divi aplicará automáticamente un botón de reproducción personalizado. Incluso puede cambiar el color del botón si lo desea en la Configuración de video en la pestaña Diseño.

Una vez que el usuario haga clic en la superposición con el botón de reproducción personalizado, la superposición y el botón desaparecerán y el video debajo de la superposición comenzará a reproducirse automáticamente.

Adición de una URL de video alojado de terceros

El método más común para agregar un video al Módulo de video es simplemente agregar la URL de un video alojado por un tercero como Youtube o Vimeo. Entonces, en lugar de agregar los dos formatos de video como lo haría con los videos autohospedados, simplemente agregaría una URL en la barra de entrada de fondo superior.

Detrás de escena, Divi agrega un div envolvente de ancho fluido e incrusta un iframe que muestra el video. Este iframe es el mismo que obtendría directamente de YouTube. Aquí hay un ejemplo de cómo se ve el código al agregar un video de YouTube con el módulo de video:

El div con la clase «fluid-width-video-wrapper» envuelve el iframe y le da un ancho del 100% para que se ajuste al ancho de su contenedor y lo haga receptivo.

Si elige agregar una imagen superpuesta, puede optar por cargar la suya propia o, para evitar un pequeño dolor de cabeza, simplemente puede hacer clic en «generar a partir del video» y Divi aplicará automáticamente una imagen superpuesta tomada del video. También puede optar por personalizar el botón de reproducción.

Explorando el módulo deslizante de video

El control deslizante de video funciona de manera muy similar al módulo de video en la forma en que los videos se implementan en una página web, excepto que ahora los videos están en un control deslizante. Esta es una forma conveniente de mostrar videos en un solo lugar para que sus usuarios puedan simplemente desplazarse por un grupo de videos uno a la vez. Para obtener más detalles sobre las opciones del módulo Video Slider, puede visitar la página de documentación .

Uno de mis elementos favoritos del control deslizante de video es la pista de miniaturas que puede usar para controlar las diapositivas. Es a la vez conveniente y atractivo.

Incluso puede personalizar los colores de los controles deslizantes desde la configuración del módulo, incluido el Color de superposición de miniaturas.

Las imágenes en miniatura seguirán siendo del tamaño de la imagen original que cargue, así que tenga cuidado de no cargar un montón de imágenes grandes en su control deslizante, ya que esto podría ralentizar su sitio. Además, las miniaturas no se pueden generar automáticamente a partir del video. Debe cargarlos usted mismo.

Las miniaturas siguen una relación de aspecto de 4:3, por lo que para ajustar las imágenes del control deslizante de 16:9, se expandirá y cortará la derecha y la izquierda de la imagen para cubrir todo el espacio.

Sugerencia de diseño : un truco que podría hacer para reducir el tamaño del archivo y evitar que sus miniaturas corten parte de la imagen es personalizar sus miniaturas para que tengan 253 × 190 píxeles (una relación de aspecto de 4: 3) y seleccione la opción para ocultar mostrar superposiciones de imágenes en el video principal. De esa manera, sus imágenes superpuestas solo se usarán para miniaturas y, por lo tanto, no será necesario que sean más grandes para ajustarse al tamaño del video principal.

4 consejos importantes para el alojamiento propio de sus videos

1. Utilice un CDN. Si está pensando en agregar sus videos a través de la biblioteca multimedia de WordPress , piénselo de nuevo. Aunque es posible alojar videos en su propia instalación de WordPress en su propio servidor, probablemente se encontrará con algunas limitaciones en el ancho de banda, el tamaño del archivo, el espacio de almacenamiento, etc., lo que puede causar que el tiempo de carga de su sitio se resienta y resulte en un retraso en la transmisión de video. . Consideraría alojar sus videos en un servicio externo como Amazons3 . Esto ayudará con los tiempos de carga de la página. Además, algunos de estos proveedores ofrecen un nivel de seguridad para evitar que las personas descarguen tus videos (o al menos dificultan la descarga).
2. Optimizar Archivo para la Web. Los videos ocupan mucho ancho de banda, especialmente cuando usa un fondo de video grande. Deberá tener cuidado de no sobrecargar su página. Hay una serie de factores a considerar si desea optimizar adecuadamente su video para la web . Aquí hay una ecuación útil para considerar:
   
   tamaño del archivo = tasa de bits (kilobits por segundo) x duración (duración del video en segundos)

   Por lo tanto, si desea obtener un tamaño de archivo más pequeño, deberá reducir la duración (la duración del video) y/o la tasa de bits (la cantidad de kilobits por segundo que se transmite). La tasa de bits siempre debe ser inferior a la velocidad de conexión del usuario. Teniendo en cuenta que la velocidad de Internet en todo el mundo es de alrededor de 7 Mbps (EE. UU. es de alrededor de 18 Mbps), querrá mantener la tasa de bits muy por debajo de eso para evitar una interrupción en la transmisión.

   No tienes que hacer todo esto solo. Existen excelentes herramientas gratuitas para ayudarlo con la compresión de video, como Handbrake .

   Sugiero leer » Las 5 mejores maneras de reducir el tamaño del video para una carga más rápida » si desea obtener más información sobre cómo optimizar sus videos para la web. Hay algunos recursos excelentes enumerados y una excelente explicación sobre cómo usar Handbrake.

3. Agregar formatos de archivo correctos.
   
   Como mencioné antes, si usted mismo aloja sus videos (sin depender de un tercero para que los aloje por usted, como Youtube), deberá agregar su video en formato mp4 y webm.
   

   Mp4 es actualmente el formato más admitido porque todavía reproduce algunos de los navegadores antiguos que usan flash y es el estándar para la compatibilidad con navegadores móviles. Divi enumera mp4 primero en el código para que los dispositivos iOS puedan reconocer el archivo de inmediato.

   Webm es el segundo formato más compatible . Fue construido para la web y parece haber llegado para quedarse. Produce transmisión de alta calidad con excelente compresión. Y es de código abierto.

   Combinados, estos dos ofrecen soporte para la mayoría de los navegadores web, incluidos los móviles.

   Una gran herramienta de conversión gratuita sería el reproductor multimedia VLC .

4. Definir tipos MIME: para que el formato de video WEBM funcione en todos los navegadores, su servidor debe tener designados los tipos MIME correctos. Puede obtener más información sobre el uso de .htaccess para definir tipos MIME aquí . Si nota que sus videos no se reproducen en ciertos navegadores, entonces esta es probablemente la razón. Para agregar tipos MIME a su archivo .htaccess, use un cliente FTP (como FileZilla) para acceder a sus archivos raíz de WordPress. Allí deberías encontrar tu archivo .htaccess. Abra el archivo en un editor de texto. Debajo de la línea que dice “#END WordPress” agrega lo siguiente:
   

   AddType video/mp4 .mp4 .m4v
   
   AddType video/ogg .ogv
   
   AddType video/webm .webm

   

   Luego guarde el archivo. Ahora sus formatos de video serán reconocidos en todos los navegadores.
   

Hosting con Plataformas de Terceros (Youtube y Vimeo)

Si considera que convertir y comprimir sus propios videos es demasiado trabajo, siempre puede dejar que un tercero haga el trabajo por usted.

Si no sabe nada sobre video, le sugiero que tome esta ruta. Si no está loco por las limitaciones de youtube o vimeo gratis, puede morder la bala para Vimeo Pro . Puede valer la pena el dolor de cabeza a largo plazo. Lo que no quieres es poner un video en tu sitio que lo ralentice o se vea mal. Simplemente no vale la pena.

Plataformas de video de terceros compatibles con los módulos Video y Video Slider

Si desea usar los módulos Video y Video Slider para agregar sus videos de terceros, puede usar las siguientes plataformas populares:

• YouTube
• Vimeo
• Dailymotion

Cómo agregar videos de terceros usando Divi

Para agregar un video desde cualquiera de estas plataformas, deberá ir a su sitio para obtener el enlace para compartir.

Luego puede pegarlo en el Video o Video Slider Module.

Haga clic en el botón «Generar a partir de video» para agregar una superposición de imágenes. O sube uno propio.

Guardar ajustes. Y eso es.

Tenga en cuenta que Divi se basa en WordPress, por lo que siempre puede incrustar videos de plataformas de terceros utilizando sus códigos de inserción sugeridos sin usar el Módulo de video. Simplemente agregue un módulo de texto e ingrese el código de inserción dentro del cuadro de contenido.

Es posible que deba personalizar el ancho y la altura de su inserción para ajustar un diseño receptivo.

¿Qué hay de Wistia?

Wistia es una plataforma poderosa que usa mucha gente, pero desafortunadamente no funciona bien con los módulos Divi actualmente. Sin embargo, puede insertar Wistia utilizando el código de inserción que proporcionan.

Pegar ese código en una sección de contenido en su sitio Divi mostrará el video.

Incluso puede pegar el código en la sección de contenido del módulo deslizante para agregar un video de wistia como una de sus diapositivas. Sin embargo, deberá ajustar algunos CSS para que se vea de la manera que desea.

Uso de fondos de video con Divi

¿Deberías incluso usar un fondo de video?

Antes de entrar en los detalles de los fondos de video, es importante que te preguntes honestamente si deberías usar uno o no. No me malinterpreten, me encanta un buen fondo de video. Pero a veces simplemente no tiene sentido. No se equivoque al respecto, los videos ralentizarán su sitio y pueden distraer su contenido. Así que nunca elijas un fondo de video sobre una imagen más efectiva. Su sitio puede ser mejor sin uno.

Pero, hay momentos en que el video es una mejor solución que una imagen. Cuando se hace bien, un fondo de video puede darle vida a su contenido. Por lo tanto, haga que su video tenga un propósito y haga que cuente.

Capacidades de fondo de video dentro de Divi

Puede agregar un fondo de video en casi cualquier lugar que desee utilizando Divi Builder. Puede agregar un fondo de video a cada sección, fila y columna. Incluso puede agregar fondos de video a la mayoría de los módulos.

Estos son los módulos que admiten fondos de video.

• Encabezado de ancho completo (también funciona en la opción de pantalla completa)
• Menú de ancho completo
• Cartera de ancho completo
• Control deslizante de publicación de ancho completo (cuando no usa la imagen destacada, puede usar un fondo de video para que sirva como fondo para todas las diapositivas)
• Título de publicación de ancho completo
• Control deslizante de ancho completo (funciona con diapositivas individuales)
• Módulo de sonido
• Barras de bar
• Módulo Blurb: solo asegúrese de darle algo de relleno al módulo.
• Módulo de llamada a la acción
• Contador regresivo
• Opción de correo electrónico
• Cartera filtrable
• Módulo de inicio de sesión
• Módulo Contador de Números
• Módulo de persona
• Configuración de la cartera
• Control deslizante posterior (cuando no use la imagen destacada, puede usar un fondo de video para que sirva como fondo para todas las diapositivas)
• Título de la entrada
• Tabla de precios (Puede configurar un fondo de video para el módulo y para diferentes tablas individualmente)
• Control deslizante (solo para fondos de diapositivas individuales)
• Pestañas (tanto para el fondo del módulo como para las pestañas individuales)
• Testimonial
• Texto
• Palanca

Bibliotecas de videos de archivo

La parte difícil de agregar un fondo de video a su sitio es encontrar la imagen correcta y asegurarse de que tenga el tamaño correcto. Afortunadamente, no tienes que crear tus propios fondos de video personalizados. Hay bibliotecas de videos libres de regalías disponibles que pueden funcionar bien para su sitio web. Si está buscando material de video gratuito, algunos buenos lugares para comenzar serían videvo , coverr o videezy . Si está buscando versiones pagas de mejor calidad, puede consultar videohive , videoblocks o pond5 . Algunos de estos sitios usan fondos de video muy bien si está buscando inspiración.

Cómo agregar un fondo de video a su página

Después de encontrar (o crear) el video correcto, las cosas se vuelven realmente fáciles. Para agregar un fondo de video a su página web Divi, simplemente implemente el generador visual y busque la sección donde desea agregar el video y haga clic en el ícono de Configuración de sección.

Debajo de la pestaña de contenido, haga clic en el ícono/pestaña de la imagen de fondo debajo de las opciones de Fondo. Si tiene un video autohospedado, ingrese los formatos mp4 y webm. Luego ingrese las dimensiones del video para que Divi sepa cómo dimensionarlo correctamente.

Ahora vaya a la pestaña de imagen de fondo y agregue una imagen de fondo que sirva como una buena alternativa para dispositivos móviles.

Luego guarde la configuración. Es así de simple.

Si estaba planeando usar uno de sus videos que ahora aloja en youtube (o vimeo) como fondo, esto no es posible actualmente dentro del constructor Divi. Recuerde que necesita estos videos en los formatos correctos para que se muestren en todos los navegadores. Sin embargo, puede descargar ese video de Youtube ( si le pertenece ) y convertirlo a formatos mp4 y webm para usarlo en su fondo.

Sugerencia de diseño de fondo: uso de un fondo de video para su control deslizante de publicación de ancho completo

Si está buscando una forma creativa de mostrar sus publicaciones destacadas en la página de su blog, puede agregar un fondo de video al control deslizante de su publicación. Déjame mostrarte lo que quiero decir.

Vaya a su página usando Visual Builder y agregue una sección de ancho completo en la parte superior de la página con un módulo deslizante de publicación de ancho completo.

En la pestaña Contenido, en Mostrar imagen destacada, seleccione «NO».

Luego, en la sección Fondo, seleccione la pestaña Fondo de video y agregue ambos formatos de su video, junto con las dimensiones.

También es una buena idea agregar una imagen de fondo como respaldo para dispositivos móviles que no pueden mostrar fondos de video.

Eso es todo.

Ahora el usuario puede desplazarse por el control deslizante de su publicación destacada con un video de fondo genial. Solo asegúrese de que el fondo del video sea lo suficientemente sutil como para no distraer la atención del contenido.

Mejores prácticas para fondos de video

Con todas las posibilidades que ofrecen los fondos de video, pensé que sería mejor incluir algunas mejores prácticas generales.

1. Incluya siempre una imagen de fondo como respaldo para dispositivos móviles. Los dispositivos móviles no reproducirán automáticamente videos grandes. Esta es la razón por la que Divi muestra la imagen alternativa de forma predeterminada en los dispositivos móviles.
2. Usa un video pequeño. Para videos de fondo, puede salirse con la suya con una resolución de 720p, ya que el fondo es una segunda reflexión sobre el contenido/texto que se superpone al video. La calidad no sufrirá tanto como para que lo notes.
3. Considere una superposición. Agregar una superposición de color semitransparente en la parte superior del video lo ayudará a obtener un tamaño de archivo más pequeño porque ocultará los detalles desordenados de un video con menos calidad. Además, hará que tu texto se destaque más.
4. No uses audio. No necesita sonido para los fondos de video, así que sáquelo. Esto reducirá el tamaño del archivo.
5. Utilice los formatos mp4 y webm para la compatibilidad con varios navegadores.

¿Pausar vídeo?

Es posible que haya visto esta opción en la lista de configuraciones en Opciones de fondo.

En algunos casos, el video puede entrar en conflicto con otro sonido de fondo de video. Esta opción ayuda a que solo se reproduzca un sonido de video a la vez.

Hacks de vídeo Divi

Hay algunas personalizaciones más avanzadas de video y fondo de video que pueden resultarle útiles. Aquí hay algunos.

Cambiar el tamaño de su botón de reproducción

Si desea cambiar el tamaño de su botón de reproducción, vaya a la configuración del Módulo de video, en la pestaña Avanzado, e ingrese el siguiente CSS personalizado en el cuadro denominado «Ícono de video»:

Puede ajustar los valores al tamaño que desee. Solo asegúrese de que el tamaño de la fuente y la altura de la línea permanezcan siempre iguales y que el margen superior y el margen inferior siempre sean un valor negativo que sea la mitad del tamaño de la fuente. Por ejemplo, si quisiera hacerlo más pequeño, los valores serían.

Cómo evitar que el fondo del video se detenga al hacer clic

En algunos casos, es posible que al hacer clic en el fondo de su video se detenga el video. Puede deshabilitar esta función agregando el siguiente CSS personalizado a su archivo style.css en su tema secundario (o en el personalizador de temas > CSS adicional):

Cómo evitar que el fondo del video se reproduzca en bucle

Es posible que hayas recordado este consejo de una de nuestras publicaciones anteriores . De manera predeterminada, el fondo del video continuará en bucle. Esto es a propósito porque eso es lo que normalmente quieres que haga un fondo de video. Pero si solo desea mostrar su video de fondo una vez y luego salir, puede deshabilitar la acción de bucle yendo a Divi> Opciones de tema> Integración e ingrese lo siguiente en:

Dimensiones de video para Divi

No quería terminar la publicación sin mencionar las dimensiones del video. No existe una regla firme sobre qué dimensiones usar considerando que todos los videos y sitios web son diferentes. Un video de 720p (1280 × 720) puede verse muy bien estirado en una pantalla de 1920 × 1080, mientras que otro se verá horrible. Al decidir las dimensiones o la resolución de un video para su sitio, puede seguir las dimensiones de la imagen para los diseños de columna de Divi.y módulos como guía general. En pocas palabras, su video debe estar lo más cerca posible del ancho de la columna en la que se encuentra sin pasar por debajo. Entonces, si tiene una columna de ancho completo que tiene un ancho máximo de 1080 px, entonces no debería necesitar un video con una resolución superior a 720p (1280 × 720). Sin embargo, si está utilizando un fondo de video que ocupa todo el ancho de su navegador, es posible que deba subir a 1080p (1920 × 1080) para que cuando abarque todo el ancho del navegador en monitores más grandes, no verse granulado.

Si va a depender de un profesional de video de terceros para preparar sus videos para la web, aquí hay una lista de resoluciones de video recomendadas para youtube .

2160p: 3840×2160

1440p: 2560×1440

1080p: 1920×1080

720p: 1280×720

480p: 854×480

360p: 640×360

240p: 426×240

Estos siguen la relación de aspecto 16:9 para que no veas las barras negras a los lados del video.

Vimeo también brinda pautas para videos . Me gusta especialmente la publicación de Vimeo sobre los conceptos básicos de compresión de video .

Pensamientos finales

Los videos seguirán siendo una parte integral de nuestra experiencia en línea durante mucho tiempo. Por lo tanto, es importante que sepa lo que está haciendo al agregar videos a su sitio web. Si decide usar video en su sitio web, Divi hace que el proceso sea extremadamente simple, brindando una solución de navegador cruzado para videos autohospedados y una solución conveniente para incrustaciones de terceros. Pero Divi no puede hacerlo todo por ti. Esperamos que esta publicación lo ayude en el proceso de seleccionar el video correcto y prepararlo para la web.

Espero escuchar de usted en los comentarios.