Guía definitiva para usar video con Divi

El video es una herramienta poderosa. Si una imagen vale más que mil palabras, entonces un minuto de video vale 1.8 millones de palabras (al menos eso es lo que sugiere el investigador Dr. James McQuivey). El video es una herramienta de marketing eficaz y, cuando se hace correctamente, un instrumento para un diseño atractivo.

Agregar un video a su sitio web es fácil con Divi. Los módulos de video y control deslizante de video le permiten agregar videos alojados por terceros, como youtube y vimeo, simplemente ingresando la URL del video. Incluso puede agregar sus propios videos personalizados en formatos mp4 y webm para una máxima compatibilidad con el navegador. Para colmo, Divi le ofrece la opción de diseñar sus videos con superposiciones de imágenes y botones de reproducción para ayudar a que coincida con el diseño de su sitio.

Además de incrustar videos en su página, Divi también proporciona una solución simple para agregar videos de fondo. Actualmente, cuando crea un sitio con el constructor Divi, cada sección, fila, columna y 20 de los 37 módulos tienen capacidad de video de fondo.

Para la mayoría de las personas, usar Video dentro de Divi es tan fácil como insertar el enlace al video de YouTube o Vimeo que desea y verlo aparecer en su publicación o página. Pero en esta publicación vamos a hablar sobre cómo y por qué Divi hace lo que hace con el video para que usted esté completamente equipado para cualquier caso de uso especial, estilos únicos o experimentos creativos que desee ejecutar.

En esta guía vamos a discutir ...

• Funcionamiento entre bastidores del módulo de vídeo y del módulo deslizante de vídeo para que pueda utilizarlo de forma más eficaz.
• la diferencia entre el alojamiento de sus videos por sí mismo y el uso de un host de terceros.
• algunos consejos sobre cómo optimizar sus videos para la web.
• mejores prácticas para fondos de video.
• una guía general para elegir las dimensiones del video.
• y algunos trucos útiles para videos de fondo.

Empecemos.

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.

Agregar un video alojado por uno mismo al módulo de video

Para agregar un video auto alojado 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 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 auto alojado o cargar su propio video usando los formatos mp4 y webm, la estructura del código que Divi implementa se parece a lo siguiente:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

Aquí hay algunas cosas que quiero señalar sobre lo que hace 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 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 no se reconocen los dos primeros formatos.
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, por lo que su video se ajustará 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 imágenes de video alojadas por uno mismo

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

Si opta por agregar una imagen superpuesta a su video auto alojado, debe cargar la suya propia. La opción de generar la imagen a partir de un video solo se aplica a las URL de video alojadas por terceros, como Youtube y Vimeo.

Debido a que la imagen adquirirá 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 la imagen del tamaño correcto. Los videos de Youtube, Vimeo y la mayoría de los otros formatos generalmente tienen 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 1080px, luego de seguir 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 hace 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.

Agregar una URL de video alojado por 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 envoltorio 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:

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

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 haciéndolo receptivo.

Si opta por agregar una imagen superpuesta, puede optar por cargar la suya propia o, para ahorrar un pequeño dolor de cabeza, simplemente haga clic en "generar a partir de 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 de uno en uno. 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 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. Debes subirlos tú mismo.

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

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

4 consejos importantes para autohospedar sus videos

1. Utilice un CDN. Si está pensando en agregar sus videos a través de la Biblioteca de medios de WordPress, piénselo nuevamente. 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, tamaño de archivo, espacio de almacenamiento, etc., lo que puede hacer que el tiempo de carga de su sitio se vea afectado y provoque 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 sus videos (o al menos dificulten la descarga).
2. Optimizar archivo para la web. Los videos ocupan mucho ancho de banda, especialmente cuando se 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 menor que 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 tú solo. Existen algunas herramientas gratuitas excelentes para ayudarlo con la compresión de video, como Handbrake.

   Sugiero leer “5 mejores formas de reducir el tamaño de los videos para una carga más rápida” si desea obtener más información sobre cómo optimizar sus videos para la web. Se enumeran algunos recursos excelentes y una excelente explicación sobre cómo usar Handbrake.

3. Agregue los formatos de archivo correctos.
   Como mencioné anteriormente, si está alojando sus videos por su cuenta (sin depender de un tercero para que los aloje como Youtube), deberá agregar su video en formatos mp4 y webm.

   Mp4 es actualmente el formato más ampliamente soportado porque todavía reproduce algunos de los navegadores antiguos usando flash y es el estándar para el soporte de 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 creado para la web y parece que llegó para quedarse. Produce streaming de alta calidad con excelente compresión. Y es de código abierto.

   Combinados, estos dos ofrecen compatibilidad con la mayoría de los navegadores web, incluido el móvil.

   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, probablemente esta sea 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ía encontrar su archivo .htaccess. Abra el archivo en un editor de texto. Debajo de la línea que dice "#END WordPress" agregue 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.

Alojamiento con plataformas de terceros (Youtube y Vimeo)

Si encuentra 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ás loco por las limitaciones de youtube o vimeo free, puedes morder la bala para Vimeo Pro. Puede que valga la pena el dolor de cabeza a largo plazo. Lo que no desea es poner un video en su sitio que lo ralentice o se vea mal. Simplemente no vale la pena.

Plataformas de video de terceros compatibles con los módulos deslizantes de video y video

Si desea utilizar los módulos de control deslizante de video y video 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 módulo Video o Video Slider.

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 está construido en WordPress, por lo que siempre puede incrustar videos de plataformas de terceros utilizando sus códigos de incrustació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 el alto para que su incrustación se ajuste a un diseño receptivo.

¿Qué pasa con Wistia?

Wistia es una plataforma poderosa que usa mucha gente, pero desafortunadamente no funciona bien con los módulos Divi actualmente. Sin embargo, puede incrustar Wistia utilizando el código de incrustació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 wistia como una de sus diapositivas. Sin embargo, deberá ajustar algo de CSS para que se vea como desea.

Uso de fondos de video con Divi

¿Debería incluso utilizar un fondo de video?

Antes de entrar en los detalles de los fondos de video, es importante que se pregunte honestamente si debe usar uno o no. No me malinterpretes, me encantan los buenos videos de fondo. Pero a veces simplemente no tiene sentido. No se equivoque al respecto, los videos ralentizarán su sitio y pueden distraer su contenido. Por lo tanto, nunca elija un fondo de video en lugar de una imagen más efectiva. Su sitio puede ser mejor sin uno.

Sin embargo, hay ocasiones en las que el video es una mejor solución que una imagen. Cuando se hace correctamente, un fondo de video puede dar vida a su contenido. Por lo tanto, haga que su video tenga un propósito y que cuente.

Capacidades de video en segundo plano dentro de Divi

Puede agregar un fondo de video casi en 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
• Portafolio de ancho completo
• Control deslizante de publicación de ancho completo (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 publicación de ancho completo
• Control deslizante de ancho completo (funciona con diapositivas individuales)
• Módulo de audio
• Contadores de barra
• Módulo Blurb: solo asegúrese de darle algo de relleno al módulo.
• Módulo de llamada a la acción
• Contador regresivo
• Optin por 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 de publicación (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 establecer 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 video 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 tiene que crear sus propios fondos de video personalizados. Hay bibliotecas de videos de archivo libres de regalías disponibles que pueden funcionar bien para su sitio web. Si está buscando algunas secuencias de video gratuitas, 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ás 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 constructor visual y busque la sección donde desea agregar el video y haga clic en el ícono Configuración de sección.

Debajo de la pestaña de contenido, haz clic en el ícono / pestaña de la imagen de fondo debajo de las opciones de Fondo. Si tiene un video alojado por usted mismo, 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 la imagen de fondo y agregue una imagen de fondo que sirva como una buena alternativa para los dispositivos móviles.

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

Si planeaba usar uno de sus videos que ahora aloja en youtube (o vimeo) como fondo, esto no es posible actualmente dentro del creador de 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 usar en su fondo.

Sugerencia de diseño de fondo: uso de un fondo de video para el 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 de fondo del 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 la 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.

Prácticas recomendadas para fondos de video

Con todas las posibilidades que ofrecen los fondos de video, pensé que era mejor incluir algunas de las 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. Es por eso que Divi muestra la imagen de respaldo de forma predeterminada en los dispositivos móviles.
2. Usa un pequeño video. Para los videos de fondo, puede salirse con la suya con una resolución de 720p, ya que el fondo es un segundo pensamiento para el contenido / texto que se superpone al video. La calidad no sufrirá tanto como para que se dé cuenta.
3. Considere una superposición. Agregar una superposición de color semitransparente en la parte superior del video lo ayudará a salirse con la suya con 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 fondos de video, así que sáquelo. Esto reducirá.
5. Utilice formatos mp4 y webm para compatibilidad con varios navegadores.

¿Pausar video?

Es posible que haya visto esta opción en la configuración de las opciones de fondo.

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

Hacks de video Divi

Hay algunas personalizaciones de video y fondo de video más avanzadas 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 etiquetado como "Icono de video":

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

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 sean siempre 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.

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

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

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

.et_pb_section_video_bg video {
pointer-events: none;
}

Cómo evitar que el fondo de video se repita

Es posible que haya recordado este consejo de una de nuestras publicaciones anteriores. De forma predeterminada, el fondo del video continuará en bucle. Esto es a propósito porque eso es normalmente lo que desea 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:

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

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 columnas y módulos de Divi como una guía general. En pocas palabras, su video debe estar más cerca 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 1080px, 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 abarca todo el ancho de su navegador, es posible que deba subir hasta 1080p (1920 × 1080) para que cuando abarque todo el ancho del navegador en monitores más grandes, no lo haga. aspecto granulado.

Si va a confiar en 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 de 16: 9 para que no vea las barras negras a los lados del video.

Vimeo también brinda pautas para videos. Me gusta especialmente la publicación de Vimeo sobre 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 eso 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, proporcionando una solución de navegador cruzado para videos autohospedados y una solución conveniente para incrustaciones de terceros. Pero Divi no puede hacer todo por ti. Esperamos que esta publicación te ayude en el proceso de seleccionar el video correcto y prepararlo para la web.

Espero tener noticias tuyas en los comentarios.