Elementor es un plugin genial para maquetar webs pero no siempre lo que buscas está tan claro de encontrar. En esta ocasión vamos a ver cómo añadir un vídeo de fondo con Elementor a una sección, algo muy demandado en páginas de producto, por ejemplo.
Los pasos a seguir son sencillos:
- Edita la sección en la que quieras insertar el vídeo de fondo en el icono de Editar.
- Ve a la pestaña de «Estilo«.
- Haz clic en el icono «Tipo de fondo > Vídeo de fondo«.
- Añade el enlace al vídeo. Puedes poner enlace a un vídeo de YouTube o a cualquier archivo mp4 alojado donde quieras.
- La opción de Fondo alternativo es recomendable para subir una imagen que sustituya al vídeo en dispositivos móviles que no muestren vídeo o para bajas resoluciones móviles.
O, visto en una sola imagen …
Ya solo quedaría algún ajuste de tamaño, pues en principio se mostrará la sección muy pequeña. Para ello haz lo siguiente:
- Ve a la pestaña Disposición.
- En Alto, elige Altura mínima.
- Mueve el deslizador del tamaño de la Altura mínima a tu tamaño deseado.
Visualmente, sería así:
Otra posibilidad que podría satisfacerte sería, en esta misma pestaña, seleccionar la opción Ajustar a pantalla, para que ocupe todo el scroll. Pero eso ya va en gustos.
VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 4.3)
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola, la plataforma no me permite reproducir ver en todos los dispositivos; esto porque ocurre y como solucionarlo; además como puedo activar la opción de reproducir con el audio del vide?
Mil gracias por la respuesta
Por defecto los vídeos de fondo nunca se reproducen con sonido, es un estándar por usabilidad. En el caso de los de YouTube por defecto tiene el «mute» por el mismo motivo. Cuando lo metes con un iframe puedes poner el mute en off pero en este caso solo nos deja usar la URL así que no hay manera … que yo sepa
Hola! Tengo la misma consulta que Camila. ↓ ↓
Se puede dejar el video de fondo pero con audio??
Muchísimas gracias!
Hola, exelente explicación de como insertar un enlace de youtube, pero seria de gran ayuda que explicaras como inserta un archivo de vídeo, me serviría mucho ya que no he podido lograr ese método. agradezco su atención y pronta respuesta.
Se suben, directamente a WordPress
hola, pero como se sube? no he podido, encontré una manera de hacerlo como bloque pero no se como ubicarlo para que se muestre en la sección que quiero, ayudame porfa
Caramba buenísimo. Ahora, como hacer para que se vea el video de fondo en una seccion en un dispositivo movil ya que este se oculta y a juro muestra el fallback de la imagen.
Hola, muy bien explicado.
Tengo un gran inconveniente, porque motivio cuando selecciono la sesion para poner la imagen de fondo cuando voy a la pestaña stilos no me muestra nada.
Hola, tengo un video de YouTube insertado de fondo en mi web creada con elementor, pero el problema es que al cargarse el video me muestra la información del vídeo como el título y el nombre del canal que lo ha subido y se ve muy feo en un vídeo de fondo. ¿hay forma de quitar esa información con elemetor?
Gracias
Sube tu video a tu biblioteca de medios en el menu principal de wordpress, luego entra a ver sus detalles copia su enlace para que lo pongas en el enlace de video
Ya se que no es exactamente el tema pero es el que más se acerca en tu web. El tema es que tenia unos videos de youtube insertados a través de Elementator y hoy descubro que no aparecen en la web. ¿podrias saber que puede pasar ? Socorro y Gracias !!!
Lo más habitual es que el autor del vídeo los haya quitado o quitado que se puedan compartir
Gracias Fernando por responder. No es la causa que comentas ya que los videos son mios y no los he quitado de youtube ni he quitado que se puedan compartir.
Los pluguins que tengo instalados son (por si te puede dar alguna pista):
-Easy Table of Contents
-Imsanity (gracias a ti)
-Autoptimize
-Google XML Sitemaps for Images
-Media file Renamer
-Smush
-Yoast Seo
Podría ser algún ajuste de Autoptimize, prueba a desactivarlo
Fernando, acertes al pleno. Ahora funciona. La duda que me queda es si configuré mal el Autoptimize o es un fallo del pluguin ¿ que otro pluguin recomiendas?. MIL GRACIAS
Vuelve a activarlo y, en vez de todo el plugin, desactiva opción a opción
Pues me ha costado. Al final se soluciona al desactivar la opción «Also optimize for logged in editors/ administrators?»
¿sabes porque?
Pues igual no, porque eso es para que tú también veas las optimizaciones, deberías probar en una ventana de incógnito del navegador, para ver cómo ven tu web los usuarios no conectados
Hola Fernando, estoy trabajando con Elementor y la plantilla Hello, pero al testear el sitio en Safari (desktop) no se ven los videos (ni el que trae Elementor por defecto), intente desactivar el plugin SG Optimizer pero el problema sigue, en Chrome, Firefox y mobile se ve correctamente, pero he probado diferentes dispositivos con safari y pasa lo mismo en las versiones de escritorio, llevo días buscando una solución pero no encuentro nada, me podrás ayudar con esto? Saludos desde Argentina!
¿Es un vídeo de Youtube o uno subido?
Fernando, antes que nada gracias por tu pronta respuesta!
En las opciones del widget de video de YouTube, tenía activa la opción «Carga Diferida» y al desactivarla ya se ven correctamente los videos en Safari.
Abrazo!
Hola Fernando Tellado.
Gracias por tus aportaciones sobre wordpress.
Tengo una miniweb con un video de fondo. Creo que en móviles no aparece por defecto, pero
¿existe alguna posibilidad de que se vea?
Uso Elementor y el tema Astra. He colocado una imagen gif para que pueda
aparecer en ambos (movil y pc), pero en el movil no me aparece.
Mi deseo sería que el video o gif se viera en pc y movil.
No sé si es realmente una limitación o es que estoy haciendo algo mal. Soy novato en creación web.
¿Alguna sugerencia?
Gracias.
Del tema seguro que no es, debe ser algún ajuste de Elementor.
Miraré en tus videos de SiteGround. Gracias.