¿Vídeo de anchura completa con Divi?

JoseZabaleta · 27 Abr 2021

¿Es posible crear una página que contenga un vídeo de anchura completa con Divi? No existe entre los módulos de anchura completa... Y si le pongo un vídeo de fondo a una sección de anchura completa, no se ve (porque no hay contenido en la sección, supongo)

¡Gracias compañer@s!

paul.lopez · 27 Abr 2021

Si puedes, el módulo va hasta donde la anchura de la columna y la sección vaya. Por defecto la anchura de sección en Divi es de 100% pero la de la columna es de 80% (al menos en el mio). Entonces, tienes que ponerle anchura a la sección de 100%, luego anchura a la columna de 100% y por último poner la anchura del módulo al 100%.

Espero que te sirva.

Suerte.

JoseZabaleta · 27 Abr 2021

Hola Paul... Es cierto que podemos poner al 100% la anchura de una columna... Y el módulo vídeo se adapta a la anchura de de la columna... Pero no podemos poner al 100% la anchura de una sección normal (para eso está la sección de anchura completa)

Lo he intentado poniendo a cero los márgenes y paddings derecho e izquierdo de la sección... pero aún así, como puedes ver en la captura, la sección no ocupa la anchura completa...

Por otra parte, la idea es un vídeo de fondo en bucle, no un vídeo con controles... Me parece increíble que no se pueda hacer con Divi, cuando se puede hacer incluso con Gutenberg... pero parece que así es...

Gracias compañero...

paul.lopez · 27 Abr 2021

Compañero! A mi si me funciona. tal cual te lo he dicho. Intenta con poner la anchura 100% y anchura máxima 100% en todos.

Igual con el módulo texto puedes poner videos de fondo sin problema. tiene la opción de video

Se puede hacer súper fácil.

También puedes ver estos post a ver si te sirve.

Divi Nation Short - How to Get a Fullscreen Video Background When Using Divi’s Fullwidth Header Module

This week we’re doing our second Divi Nation Short. It’s actually much shorter than most shorts will be as we move forward but I’ve been gearing up to attend Miami WordCamp and my week has been full of travel plans, packing, and gear testing. Nevertheless, I think we’ve got a great Divi Quick...

www.elegantthemes.com

Ojala puedas.

JoseZabaleta · 27 Abr 2021

Gracias Paul... ¿En qué pestaña puedes poner al 100% el ancho de una sección? En la pestaña "contenido", no es posible, como puedes ver en la captura... Y en las otras dos pestañas tampoco lo veo... ¿Podrías adjuntar una captura?

Gracias de nuevo...

paul.lopez · 28 Abr 2021

En la pestaña de diseño > Tamaño > Anchura Máxima 100%
y luego debajo dice otra vez anchura máxima y le pones 100% también es porque la traducción no está bien hecha.

Lo mismo a las secciones y a las columnas.

JoseZabaleta · 28 Abr 2021

Hola Paul... Ya sé que puedes poner al 100% de anchura un módulo y una fila, pero no una sección... ¿Podrías adjuntar una captura de cómo pones al 100% de anchura una sección?

Gracias... Abrazo...

paul.lopez · 30 Abr 2021

Aqui lo tienes, si que puedes modificar la anchura de las secciones.

JoseZabaleta · 30 Abr 2021

Gracias Paul... Si... había visto la opción de anchura máxima en la sección, pero tras probarlo vi que el vídeo no ocupaba la anchura total y supuse que era debido a que la sección no ocupaba la anchura total... pero era debido a que había puesto la anchura de la fila al 100% pero no había puesto la "anchura máxima" al máximo...

En cualquier caso, de esta forma el video ocupa toda la anchura, pero se muestra con los controles... y lo que busco es que se muestre sin controles y se reproduzca en bucle una y otra vez...

Gracias al link que compartiste descubrí que se puede hacer con la sección de anchura completa y el módulo "título de anchura completa", dejando todos sus campos en blanco, poniendo el vídeo de fondo, y seleccionado "Hacer que se muestre a pantalla completa", en la pestaña diseño...

Pero por alguna razón no muestra el video en su altura total... Supongo que es una cuestión de las proporciones ancho-alto del vídeo...

Gracias de nuevo... Abrazo...

paul.lopez · 30 Abr 2021

El video tendrá de altura lo que el módulo de texto tenga de altura. Como el video lo tienes de fondo, tienes que tener suficiente relleno para que se muestre todo, entonces aumentar el padding del módulo del título de anchura completa.

También lo puedes configurar con la altura mínima, de la sección o la de la fila. Le puedes poner la altura mínima el máximo del video, entonces siempre se va a mostrar completo.

Es el video super importante? porque sino, otro truco es ponerle una capa de degradado encima al video, que vaya de abajo hacia arriba de un color sólido oscuro a transparente, entonces visualmente la parte de abajo del video no se vería pero si la parte de arriba. Lo que le da al usuario la sensación de ver el video en la parte de a atrás pero no todo.

Suerte con el proyecto.

JoseZabaleta · 3 May 2021

Gracias Paul...

Todos los campos del módulo "título de anchura completa" están en blanco... Solo tiene un vídeo de fondo, y en la pestaña "diseño" le he dicho que ocupe el ancho completo... Y así lo hace... pero no muestra el vídeo en toda su altura sino que lo corta... Puedo darle una altura fija y/o una altura mínima... pero en algunas pantallas se vera bien, y en otras no tanto...

En https://www.viaje-iniciatico.com/introduccion-caminante-del-cielo/ debajo del título se puede ver un gif animado que se ve bien en todas las pantallas... ya que está hecho con el módulo "imagen de anchura completa" en una sección de anchura completa... y se ajusta a la perfección a cualquier pantalla...

Escuché que podría disminuir el peso de la página convirtiendo el gif a mp4... y así es... se reduce en algunos cientos de Ks... pero el vídeo no se adapta a diferentes dimensiones de pantalla, como lo hace el gif... por lo que de momento creo que lo dejaré como está...

Gracias de nuevo... Abrazo...

paul.lopez · 4 May 2021

Una buena forma de solucionar el problema.

Es verdad que los videos no son tan responsive, pero para eso Divi tiene la edición de Desktop, tablet y móvil, así le das el tamaño que necesitas para los diferentes view break points.

Suerte con todo.

JoseZabaleta · 9 May 2021

Gracias Paul... Cierto que puedo dar tamaños diferentes a desktop, tablet y móvil... pero aún así hay pantallas de diferentes dimensiones...

No comprendo porqué al configurar el vídeo de fondo para que ocupe la anchura completa, ocupa la anchura completa pero lo corta en altura... pero así lo hace...

La página no carga mal, por lo que dejaré el gif, al menos hasta que el vídeo sea responsive...

Feliz semana... Abrazo...