Hoy en día los videos son elementos que funcionan muy bien para el marketing, pero a la hora de colgarlo en una web, hay que tener determinadas consideraciones si no queremos desesperar a nuestra audiencia potencial.
Ahora 20% de descuento Plantilla DIVI
->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.
Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA
NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.
->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.
Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA
NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.
DESCUENTO PLAN LIFETIME ACCESS
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE POST / VÍDEO EN BACKGROUND
- 1.- Ventajas de tener un video en la home
- 2.- Inconvenientes de tener un vídeo en la página de inicio
- 3.- A qué me refiero, cuando hablamos de un vídeo background o de fondo en la home
- 4.- Elementos a tener en cuenta para poner vídeo de fondo.
- 5.- Como implementar el vídeo con el tema DIVI de Elegant Themes
- 6.- ¿Interesa poner un header o cabecera semitransparente? ¿qué implicaciones puede tener?
1.- Ventajas de tener un video en la home
Poner un vídeo en la página de inicio de una web es un recurso que todavía no se utiliza demasiado. Por ello, es algo que puede ser innovador y bien valorado por los visitantes potenciales del sitio web.
Un vídeo de calidad, habitualmente producirá sorpresa y reconocimiento en el cliente que visita el sitio web.
Haz clic en la siguiente imagen para ver un ejemplo de un vídeo tipo background o fondo en la página de inicio o home de una web. En este caso, es el sitio web de una Escuela de Negocios (Antigua Escuela Europea de Negocios, ahora conocida como EBF)
Ejemplo Vídeo de fondo en la página de inicio
2.- Inconvenientes de tener un vídeo en la página de inicio
Si el vídeo es pesado y se carga lentamente puede llegar a producir que los potenciales visitantes acaben abandonando nuestra página web.
Es decir, si no tomamos algunas precauciones podemos conseguir el efecto contrario, pasando de la sorpresa y reconocimiento a la impaciencia y hostilidad hacia el sitio.
2.1.- Ojo con los dispositivos móviles y los vídeos
Cada vez se usan más los dispositivos móviles para acceder a página web. Tenemos que tener en cuenta que los dispositivos móviles cuando estamos fuera del alcance de la red WIFI de nuestra casa u oficina, a la hora de descargar un vídeo lo harán mucho más lentamente que un ordenador con una conexión a internet estándar en el interior de una vivienda u oficina.
También es cierto que las redes móviles cada vez tienen más potencia. Pero hoy en día sigue siendo insuficiente, por lo que mi recomendación es sustituir el vídeo por una imagen de fondo cuando se visualiza la web a través de un dispositivo móvil.
Intentar cargar el vídeo de fondo en un dispositivo móvil puede producir frustración, desesperación y finalmente el abandono de la página por parte del visitante.
La plantilla Divi y ya incluye de manera automática este funcionamiento.
2.2.- Vídeos y textos en la home
En algunos sitios web, el poner un vídeo en la home o página de inicio suele estar acompañado de la supresión casi total de contenido de texto. Para el tema del posicionamiento web SEO, no es nada beneficioso.
Por lo que mi recomendación es que, aunque pongamos un vídeo de fondo, no olvidemos incluir otros recursos de texto e imágenes en la página de inicio. Así como las etiquetas H1, H2, etc.
Tenemos recursos como acordeones (módulo de Divi y otras plantillas) para poder incluir texto en una página de una manera limpia.
3.- A qué me refiero, cuando hablamos de un vídeo background o de fondo en la home
Voy a intentar aclarar ahora a que me refiero cuando hablo de un vídeo tipo background o de fondo en la web.
3.1.- No estamos hablando de la títpica intro previa a la visualización de la web
Habréis visto en algunas páginas web el típico vídeo corporativo introductorio del sitio que podemos saltar pulsando un botón para poder navegar por la página web.
Cuando hablamos de un vídeo tipo background o de fondo en la web, no hablamos de este tipo de vídeo introductorio.
Este tipo de webs muestran un vídeo introductorio previo a la visualización de la home. Es fácilmente detectable que esa primera página no es la home, ya que esa primera página no tiene header con su menú ni footer.
Es cierto, que cada vez se ven menos sitios web de este tipo. Ya que tiene muchos inconvenientes a nivel de SEO. No tener en la primera página enlaces para que los boot de Google puedan acceder a toda la web es bastante negativo.
Si quieres poner un vídeo corporativo, pues ponlo en la home o en la página de “nosotros” (la empresa o quienes somos)
CURSO ONLINE WORDPRESS + DIVI 3.0
3.2.- No estamos hablando de un vídeo incrustado de Youtube o Vimeo
No estamos hablando de un vídeo subido a youtube o Vimeo e incrustado en la web.
Un vídeo incrustado es un vídeo subido a una plataforma especializada como youtube o vimeo y que luego a través de un código de inserción se incluye en una entrada de blog o página.
El vídeo suele aparecer con los iconos de reproducción y un enlace a la página del vídeo en Vimeo o Youtube. Es un vídeo que no suele aparecer a tamaño completo y que no se reproduce de manera automática.
Ejemplo de vídeo de Youtube incrustado en entrada de blog
Esta es una forma muy interesante para ofrecer vídeos en post o entradas de blog. De hecho, yo uso este sistema habitualmente. Pero como digo, en este post no estamos hablando de los típicos vídeos incrustados de youtube. Sino de vídeos de anchura completa que se inician con la carga de la página y se repiten indefinidamente.
La principal ventaja de utilizar vídeos incrustados es que la carga la realiza la plataforma de vídeos y no nuestro hosting.
3.3.- Estamos hablando de un background o fondo en movimiento.
Habitualmente utilizamos imágenes a modo de background en algunas páginas web. En este artículo estamos hablando de vídeos en bucle que actúan como un backgroungd móvil de la página de inicio o home. Por supuesto este background móvil debe decir algo tiene que tener un mensaje.
El vídeo como buen background que queremos que sea no puede pararse, debe estar funcionando en bucle. Por lo que trabajaremos con videos no demasiado largos, para que tengan poco peso y se carguen fácilmente.
SUPER DESCUENTO DIVI
4.- Elementos a tener en cuenta para poner vídeo de fondo.
a.- Duración y peso del vídeo: La duración del vídeo tiene una relación directa con el peso del mismo. Por lo que deberemos utilizar un vídeo de corta duración y ponerlo en bucle para que no finalizce. Yo recomiendo utilizar vídeos de menos de 30 segundos
El vídeo no puede tener una alta calidad ya que si no será imposible reproducirlo adecuadamente en una página web.
Yo utilizaría vídeos con pesos inferiores a los 25 mb (Aunque la capacidad de reproducción del vídeo va a depender mucho del hosting en el que esté hospedada la web). Cuanto menos ocupe el video y mejor sea el hosting será mejor, ya que podrá ser reproducido sin “parones” por más visitantes potenciales de la web.
b.- Formatos del vídeo: El video es descargado y reproducido por el navegador web de cada visitante de la página, por lo que para tener el mayor grado de compatibilidad con el máximo número de navegadores web el formato del vídeo debe ser .MP4 o .WEBM.
c.- Hosting: Para que los tiempos de espera debidos a la respuesta del servidor en la descarga inicial del vídeo sean pequeños debemos contratar con una buena empresa de hosting.
Como la página inicial de la web va a contener un vídeo, la home va a tener un peso mayor del que suele ser habitual por lo que será importante disponer de un hosting que nos permita una transferencia mensual elevada y una buena respuesta ante varios visitantes simultáneos.
Por ambas consideraciones te recomiendo el hosting Webempresa un hosting de calidad, con discos duros SSD de alta velocidad y amplia transferencia mensual.
d.- Imagen en móviles: debemos sustituir el vídeo por una imagen de fondo cuando el acceso a la página web se realice a través de un móvil, ya que actualmente las líneas móviles aún no tiene un ancho de banda suficiente para que este tipo de descargas se haga de manera fluida cuando el móvil no tira de conexión Wifi.
e.- Plugin de cache: es muy interesante disponer de un plugin de caché que ayude a una carga de páginas más fluida y rápida.
SUPER DESCUENTO DIVI
5.- Como implementar el vídeo con el tema DIVI de Elegant Themes
Como implementar el vídeo dependerá de la plantilla y page builder utilizado.
Vamos a ver como podemos implementar un vídeo de fondo utilizando mi plantilla favorita, la mejor plantilla para wordpress, la plantilla Divi.
Antes de colocar el vídeo, debemos crear la página en la cual posteriormente pondremos el vídeo.
Utilizaremos el Divi builder o constructor de Divi para ello.
i.- ¿Dónde podemos poner el vídeo de fondo?: el vídeo que queremos que se muestre como fondo o background podremos ponerlo como fondo de una sección estándar, sección de anchura completa o como fondo de una sección especial.
En cualquiera de los 3 casos hay que seguir el mismo procedimiento.
Nota: las secciones son los contenedores más grandes de que dispone el divi builder. En este post te hablo un poco sobre la estructura del constructor de Divi y sus diferentes partes para que entiendas mejor de lo que estamos hablando: Divi builder
ii.- Configuración de la sección: Haremos clic en el botón de configuración de la sección en la cual queremos añadir el vídeo de fondo.
En la pestaña “Contenido” buscaremos el apartado “Fondo”. En este apartado tenemos la opción de añadir diferentes tipos de fondo: color continuo, degradado, imagen o Vídeo (en este orden)
Añadir un vídeo de fondo con Divi
iii.- Subir vídeo: para subir el vídeo haremos clic en la pestaña de vídeo (la última) y debajo haremos clic en el botón “+” para subir el vídeo.
Verás que hay dos bloques: Vídeo .MP4 de fondo y Vídeo .WEBM de fondo.
Según el formato de nuestro vídeo haremos clic en uno u otro.
A continuación, procederemos a subir el vídeo.
iv.- Tamaño del vídeo: lo normal es que el vídeo se adapte a la pantalla completa, pero en caso de que tengas problemas con las dimensiones puedes intentar solucionarlo con los dos apartados que aparecen debajo de la carga del vídeo.
Las opciones son “Anchura de vídeo de fondo” y “altura de vídeo de fondo”. Las dimensiones deben ser introducidas en píxeles.
v.- Permitir que otros reproductores pausen el vídeo cuando comience a reproducir: he utilizado esta opción en sus dos variantes y lo cierto es que no he encontrado diferencia alguna en la reproducción del vídeo. En ambos casos el vídeo entra en bucle o loop y cuando termina vuelve a comenzar de manera automática.
vi.- Imagen de fondo para móviles: antes hemos comentado que es muy interesante subir una imagen de fondo que se cargue en vez del vídeo cuando la web se visualiza a través de un dispositivo móvil.
Para ello iremos a la pestaña de “imagen”, que es la tercera, y haremos clic en el botón “+” para subir la imagen.
Imagen de fondo que se carga en vez del vídeo en dispositivos móviles
6.- ¿Interesa poner un header o cabecera semitransparente? ¿qué implicaciones puede tener?
Poner un header semitransparente o traslúcido con el vídeo de fondo detrás, crea una integración total de los elementos de navegación en el vídeo y esto es algo que llama gratamente la atención a los visitantes.
En el caso de la plantilla Divi, si hacemos que el header sea traslúcido (no opaco), el vídeo de fondo subirá y parte de este se colocará detrás del header o cabecera de la web.
Habitualmente esto hará que tengamos que utilizar un color claro en los ítems o elementos del menú, debido a que el vídeo + la capa translucida del header suelen crear una capa algo oscura.
El principal problema que puede provocar el utilizar un color claro para los ítems del menú, es que en el resto de páginas donde no tengamos el vídeo tendremos un header semitransparente con un fondo blanco y los ítems de menú no se verán.
Ante esta situación os propongo dos opciones:
i.- poner una imagen de fondo en todas las cabeceras de todas las páginas
Esta es la solución que se ha adoptado en la página de EBF Murcia que estamos viendo en los ejemplos.
Si te fijas, en todas las páginas de la web se ha utilizado una imagen que hace las veces del vídeo, y de esta manera se consigue que los ítems de menú se vean bien en todas las páginas.
ii.- Opción de crear una blank page con menú y hacerlo transparente solo en esa página con Divi
Otra opción, en el caso de utilizar la plantilla Divi, podría ser crear una home especial con un menú especial. Me refiero a utilizar una “blank page” para la home.
Es decir, una página sin header ni footer. En esta página utilizaremos el “módulo menú” dentro de una sección de ancho completo.
Pondremos el vídeo como fondo de esa sección y el módulo menú con diseño semitransparente. Pero este menú será único en la home.
En el resto de páginas podremos usar un diseño de menú normal con ítems de menú oscuros.
SUPER DESCUENTO DIVI + REGALO
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquin, gracias por tus tutoriales.
Necesito tu ayuda, he subido un video a la web: heartfelthomes.es pero el audio no va.
Tengo que hacer alguna acción para que suene?
Buenas,
prueba a ver si con el módulo vídeo de Divi te ocurre lo mismo.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso actualizaciones y seguridad en WordPress, Curso diseñador web Freelance, Curso como gestionar un Blog, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc. (más de 30 cursos)
Hola Joaquín, sé que es un post muy antiguo pero ojalá lo leas:
Ya tengo el vídeo como background y también he puesto el script para que no se reproduzca en bucle, pero claro, al terminarse se carga el primer fotograma, y a mi lo que me interesaría es que se quede en el punto final del vídeo… jeje estoy rizando el rizo, verdad? 🙁
Gracias!
Hola Joaquín,
Tengo un problema desde la última actualización de Divi. Tengo un vídeo de fondo de anchura completa en la home que funcionaba perfectamente hasta que al actualizar han aparecido unos márgenes oscuros a ambos lados del vídeo. He intentado quitarlos mediante CSS pero no consigo hacerlo full width.
¿Algún consejo? Muchas gracias de antemano.
Buenas.
1.- Comprueba que no tienes bordes establecidos en la sección
2.- Comprueba que no tienes bordes establecidos en el módulo
3.- Escribe una consulta también en el soporte de Divi Elegant Themes, por si es algún tipo de bug que tengan que solucionar en próximas versiones
4.- Continua actualizando a siguentes versiones
Se ha solucionado con la última actualización. Muchas gracias por responder.
Hola Joaquín, soy un seguidor de tu blog y tengo un problema a solucionar referente a este post. En el módulo de DIVI de vídeo, necesitaría que el vídeo se auto iniciara automáticamente. ¿podrías decirme como conseguir esto?
Un saludo.
Hola Alberto.
Por defecto ni el módulo de vídeo de Divi, ni la opción de poner un vídeo de fondo en una sección tienen la posibilidad de autoplay. Es decir, que se inicie solo.
A continuación, te paso una serie de páginas donde hablan de como poder añadir esta funcionalidad de autoplay a los vídeos:
1.- Autoplay Videos with Hidden Controls in Divi
2.- Divi video autoplay : lancer la vidéo au chargement de la page
3.- Video toolkit
Hola Joaquín,
Quería saber si es posible que una vez se visualice un video en la Home. éste desaparezca para que se visualicen las opciones de menú de la Home. Lo quiero para WIX y aunque existe una página para editar código no se qué código debo escribir
Gracias
Hola Alexei,
Nunca he visto en una web que al terminar un vídeo desaparezca y aparezca otra cosa. No creo que se pueda hacer
Hola Joaquin,empeze a hacer mi propia pagina de videos musicales en WIX sucede que cuando los subo al servidor que me da el plan premium cada video se reproduce con una distorcion del audio de los videos.
No soy ni rpogramador ni exeprto en esto y opte por WIX por la facilidad de maniobra.
hay algun plug in que pueda hacer cache e incorporarlo para evitar ese problema?
Buenas Gabriel,
No creo que añadiendo una caché te resuelva el problema de los vídeos. En cualquier caso, lo que yo haría sería consultar a Wix el problema que tienes y ver que solución te dan.
Hola Joaquín, quisiera preguntarte ¿si es posible colocar un audio en cada pagina de DIVI? Cuando se abra la página automáticamente se reproduzca música.
Hola Francisco,
Con Divi no, eso lo has de realizar con wordpress. A través de un plugin o con shortcodes.
En este post puedes ver como se realizaría con shortcodes: Using And Customizing The WordPress Audio Player
Hola Joaquin , yo tengo una web en worpress y mi theme me permite poner un video en home y una foto mientras carga, pero lo que pasa es que no se que he echo que ya no sale el sonido y no se como podria arreglarlo te dejo mi web por si me puedes ayudar . gracias
Hola,
Estoy casi convencido de que eso depende de alguna opción de configuración de tu plantilla. Repasa donde tienes insertado el vídeo de youtube si hay alguna opción de configuración relacionada con el sonido, y que hayas desactivado por error.
Para asegurarte que no es un problema de Youtube, puedes intentar hacer lo mismo en otra página de prueba con un vídeo de vimeo (para asegurarte que el problema no es de Youtube).
También puedes probar en otra página de prueba a subir otro vídeo de youtube, a ver si te da el mismo problema.
Buenas tardes Joaquín, gracias por este genial post.
Tengo un problema, a ver si sabes la solución.
Cree un vídeo background a partir de un «Fullwidth Slider». Puse el video en MP4, en webm para otros dispositivos y una imagen para mobile. Y se reproducía perfectamente.
Pero desde unas semanas para acá, empieza a cargar el video, y se queda en negro. Si estoy en «Visual builder» en front se ve, en el momento que salgo de visual builder se pone en negro. Si entro en otra sección y vuelvo a home ya si carga. Es decir la primera carga siempre se queda en negro. Es tan misterioso para mi que he decidido escribirte por si podías ayudarme.
El caso es que tengo otros videos de la misma manera en la web y cargan perfectamente.
Hola Borja,
Parece que hay algún tipo de incompatibilidad con la última versión de Chrome.
Prueba en Firefox y verás como si funciona correctamente.
Lo que habría que hacer es escribir en el foro de soporte de Elegant Themes, para que revisen el problema y vean si en la próxima actualización de la plantilla se puede solucionar.
También podría ser Chrome el que lo solventara el problema en una próxima actualización.
Hola Borja,
Acabo de probar y ahora si se vé el vídeo correctamente en Chrome. Es posible que hayan sacado una actualización, o haya sido una actualización de Divi. Pero el caso es que ya se ve correctamente.
Buenas! Me estoy iniciando en DIVI y tus posts son de gran ayuda.
Al respecto de éste post, siguiendo los pasos, he podido subir un video pero no logro que me salga a anchura completa. Me sale con unos márgenes del color de fondo de la página (en mi caso blanco) a cada lado del video (derecha e izquierda).
¿Cómo lo puedo solucionar?¿el video necesita algún tipo de característica en particular para que se ajuste a la anchura completa?¿He de tocar el CSS como en el caso de las imágenes?
Gracias de antemano por tu ayuda.
Un saludo!
Buenas,
¿has probado a ponerlo como fondo de una sección?
Hola! Tengo el mismo problema. Lo pongo como fondo de sección, en un título de anchura completa, y de igual modo me aparece con esos bordes. Lo raro, es que al principio se veía bien.
Buenas.
Mira la configuración de bordes de la sección
Al hacerlo de este modo, al cargar la pagina el vídeo es auto-play?
Saludos
Buenas,
si creo que por defecto es autoplay
Hola Joaquín,
Lo primero felicidades por tu blog, es de gran ayuda 😉
Tengo una duda, he subido un vídeo a la home de una web que estoy desarrolando con divi. Pesa 5MG y es formato .WEBM pero no se ve en móviles ni tablet. He leído en tu post que «debería sustituir el vídeo por una imagen de fondo cuando el acceso a la página web se realice a través de un móvil, ya que actualmente las líneas móviles aún no tiene un ancho de banda suficiente para este tipo de descargas»
¿Es así? no hay forma de que se cargue, bajándole el peso, la duración o modificando el css?
Muchas gracias por adelantado
Leire
Buenas,
por defecto Divi no muestra el vídeo en dispositivos móviles y tablets y muestra la imagen que pongas en su defecto. Cargar un vídeo en móvil o tablet aunque sea de solo 2-3 megas es una barbaridad, la mayoría de gente no podrá verlo o abandonará la página antes de que se descargue el vídeo (siempre que no estén conectados vía Wifi)
Aunque le bajes el peso Divi seguirá sin mostrarlo en móviles o tablets.
Mira a ver si encuentras alguna información de interés en esta entrada de Elegant thmes que habla sobre el tema: Ultimate Guide to using Video With Divi
Hola Joaquín, lo primero felicitarte por tu blog, y este posta está genial soy un fiel seguidor tuyo.
Mi pregunta es, al poner el vídeo no para de reproducirse una y otra vez, hay alguna manera de que se pare? Y quede fijo una vez que se haya reproducido? Gracias y un saludo
Hola Carlos,
gracias por tus palabras,
en principio no hay ninguna opción en Divi para desactivar o eliminar el bucle o loop en la reproducción del video de fondo,
pero parece que añadiendo un determinado código si se podría hacer.
No lo he probado, pero échale un vistazo a este post de Elegant Themes, busca el apartado «How to Stop Video Background from Looping» y prueba a seguir las instrucciones que comentan en el post a ver si te sirve: Ultimate Guide to Using Video with Divi
Muchas gracias por responder, he visitado la página, el único problema es al hacer los pasos que me dice luego no me deja insertar el código, ya que esa parte me aparece sombreada
Que raro,
utiliza el traductor de Google mismo y escribe un comentario en ese post de Elegant themes
Recibido gracias
Por favor, Coméntanos lo que te contesten
gracias
Conseguí encontrar lo de integración, pero me dice que en primer lugar en su sección nombre de fondo en el código CSS, tengo que meter otro código «no-loop» pero esa sección no se a que se refiere
Se referirá a la sección en la que has incluido el vídeo como background, en la pestaña CSS.
¿Pero donde dice que tienes que introducir otro código «no-loop» en la sección donde tienes el vídeo?
Esto me dice: Si no desea que se realice el bucle de vídeo de fondo, haga lo siguiente:
En primer lugar, en su sección nombre de fondo su CSS Clase «no-loop». A continuación, vaya a Opciones del tema Divi> Integraciones> Añadir al cuerpo.
Pegue el fragmento siguiente allí y guárdelo.
————-
Encuentro lo de integración, el CSS clase realmente no sé dónde se pone, lo puse en varios sitios y no funciona
Buenas,
tienes que ir a la sección en la que hayas puesto el vídeo y en la configuración de la sección ir a la pestaña «Avanzado» y poner «no-loop» en el apartado: «Clase CSS».
Un saludo
Hola Joaquín,
Tengo problemas en el paso:
iii.- Dentro de la sección de ancho completo (fullwidth section) añadiremos un módulo tipo Slider de ancho completo (Fullwidth Slider o control deslizante de anchura completa).
A mí me aparece solo control deslizante de vídeo, lo másparecido a «control deslizante de anchura completa…)
Y, por lo tanto, no puedo realizar iv.- Desplegaremos el Slider de ancho completo (Fullwidth Slider o control deslizante de anchura completa) y pulsaremos en “Add new slide” para añadir un nuevo Slide
O desplegar el slider…
Muchas gracias
¡¡Ya estás, solucionado!! 🙂
Hola,
lo has resuleto tu sola,
¿qué problema había?
Una cosa muy tonta, solo había añadido sección, no había añadido sección de ancho completo o sección de especialidad.
Lo que pasa es que, una vez subido el vídeo y habiendo puesto las medidas de ancho y alto que nos aparecen en las propiedades del vídeo. El módulo debe tener menor altura, porque el vídeo no encaja en las dimensiones, y si en el vídeo salen personas, solo se les ve la cabeza, y eso a los más altos… jejeje
¿Sabes cómo podríamos solucionarlo?
Utilizamos Premiere Pro de Adobe para editar los vídeos. y las medidas que nos salen en las propiedades del vídeo son ancho: 1280 y alto: 720.
¡Gracias!
Buenas,
prueba en la configuración de la sección de ancho completo, en el apartado: «Relleno personalizado» (padding) en el campo «base» que se refiere al relleno inferior (padding inferior) pon 200 por ejemplo y prueba a ver si sale el vídeo más grande. Prueba con varios valores
Hola Juaquin, estoy subiendo unos videos para un curso, pero no quiero que las personas lo descarguen, sino que solo lo vean, pero nose porque en la plantilla Divi, me sigue apareciendo la descarga del video y aparte es muy lento al cagarse, te agradezco de corazon me ayudes con ese caso!.
Buenas,
para que la gente no se pueda descargar un vídeo no puedes subirlo a wordpress, da igual que plantilla uses y efectivamente será lento porque es tu hosting el que tiene que mostrar el vídeo (y dependerá de la potencia de tu hosting que se cargue más rápido o más lento).
Como explico en el post que te enlazo más abajo, para crear vídeos de un curso online lo suyo es una cuenta de Vimeo y deshabilitar la descarga y restringir la visualización por dominio, incrustando los vídeos en WordPress. Además la carga de los vídeos los hará Vimeo y no tu hosting por lo que se cargará muchísimo más rápido.
En este post de cómo crear una plataforma de cursos online puedes ver más info sobre esto
Buenos días, Joaquin
Tengo en mi página un video para pc y una imagen gif para móviles.
El problema es que se muestra esta imágen sobre el video durante un segundo y no sé como solucinarlo
Hola Jorge,
eso debe ser un bug de la plantilla,
1.- ¿estás utilizando la última versión de la plantilla Divi? es posible que ese bug esté en versiones antiguas de la plantilla y que se haya solucionado en las últimas.
2.- ¿si pones una imagen en vez de un gif sigue pasando lo mismo?
estimado como puedo hacer para que el video se visualize en los celulares
http://www.wicham.cl/desarrollo/ravial/ este es el sitio pero solo veo el video en la web
Hola Mauro,
el módulo de Video de divi está configurado para no verse en móviles, puedes poner una imagen fija que aparezca en la versión móvil y el vídeo en la versión de escritorio. La razón es que como en móviles la carga de una web es más lenta si tuviera que cargar un vídeo subido al hosting seguramente se quedaría clavada la descarga y no se vería la web.
Hola,
Buscando como lograr ver los videos en el movil he pasado por aqui.
De lo que he investigado hasta ahora:
La limitación de reproducir los videos en los moviles esta decidida por consenso y limitado en el core del WP. La resolución minima para que se reproduzca un video es 900×500. por debajo no los reproduce, las plantillas lo que tienen que icorporar es la opción de mostrar la imagen de sustitución para cuando no hay video.
Bueno sigo buscando como cambiar esa limitación en el core.
Un saludo,
Hola Joaquin,
Quería un poco de info extra sobre esta plantilla que parece realmente interesante, aver si me puedes ayudar. Primero, me podrías confirmar que soporta vídeos en la cabecera como los de este theme https://www.templatemonster.com/demo/62222.html Otra cosa, sabes si permite la instalación de plugins de chat online como Zopim u Olark? Muchas Gracias.
Luis
Hola Luis,
Imagino que te refieres a la plantilla Divi.
Si, claro Divi te permite poner un vídeo en la cabecera como muestra la plantilla que comentas.
Poner un plugin de chat online no va a depender mucho de la plantilla. En principio lo debes poder poner con cualquier plantilla.
Un saludo
Hola ! Quería saber si se puede colocar dos o tres videos, y que estos se ejecuten en random en el fondo de pantalla de un web desarrollada en wordpress?. Para tener en cuenta, cada video tiene 5 segundos, pesan 7Mb y están en formato mp4.
Saludos.
Hola Javier,
eso va a depender de la plantilla o plugin utilizado para ello. En el post se habla de la plantilla Divi y con ella no es posible realizar lo que dices. Es posible que con otra plantilla si se pueda hacer un random con varios vídeos (yo no conozco ninguna), también puedes buscar algún plugin que permita hacer esto, pero te adelanto que no conozcon ninguno.
Un saludo
Hola Joaquín, gracias por tu respuesta, en verdad si veo que es un poco difícil, en esta web lo tienen y me gustó la opción para aplicarla en una web : http://www.standardhotels.com/miami/properties/miami-beach
Seguiré investigando.
Saludos.
Buenas,
Según el detector de CMS de mi navegador, la web que comentas no está hecha con WordPress
Un saludo
he seleccionado el video de background en mi tema de onetone pero al abrirlo en mobiles me aparce una pantalla estatica con una imagen que no fue de mi eleccion como puedo cambiar
Hola Charles,
Con la plantilla Divi que es con la que está escrito este post sucede algo similar. La plantilla solo muestra el vídeo en escritorio, y en móviles y tablets muestra una imagen. En el caso de Divi se puede personalizar que imagen queremos que muestre. Supongo que en la plantilla que estás utilizando también se podrá.
El motivo de todo esto es que a los móviles les cuesta cargar mucho páginas que tengan vídeos y eso puede hacer que la página no se cargue, por lo que prefieren que en estos casos se muestre una imagen en vez de un vídeo.
Un saludo
Hola Joaquín,
Creo que esto ahora es un problema, puesto que con la actualización de Mobile First Index los contenidos en desktop y mobile han de ser los mismos, por tanto si pongo un vídeo en un slider por ejemplo, debería visualizarse sí o sí en móvil, porque sino para Google es como si no existiese, sobre todo si es un enlace.
Por tanto como lo solucionamos
Un saludo
Buenas,
Los contenidos de móviles y Desktop no tienen por qué ser los mismos. Google idexa contenidos con boots para móviles y escritorio.
Lo lógico es usar en móvil solo los contenidos fundamentales, y en escritorio todos los contenidos.
Hola Joaquín,
Muchas gracias por la info!
Por lo que dices entiendo que el vídeo se pone automáticamente en bucle sin tener que hacer nada especial.
Saludos!
Hola Rafa,
sí, el vídeo se reproduce una y otra vez con la configuración por defecto.
Un saludo
Hola Joaquín,
Continúo por aquí para que no este tan tabulado y sea mas fácil de leer, pero si consideras que debe ir a continuación de tu respuesta, por favor muévelo.
Lo he conseguido a base de poner rellenos con pixeles aleatorios. 200px.500px, 1400px. Hasta que al final con 500px me ha movido el relleno inferior y ya se me veia el video. Curioso no? jeje.
A lo que me refiero con tu video, es que a ti, se te ve a pantalla completa a lo ancho, pero a lo alto, no. Se ve una parte de la continuación de tu web , un letrero que pone «Pulse aqui…» . En el dominio que te he pasado por correo, como puedes observar, a mi se me ve el video a lo ancho a pantalla completa y a lo alto también, por lo que puede generar confusión a la hora de hacer scroll, ya que a los visitantes se les puede escapar que la web continua por abajo. Perdona si no me he explicado bien, espero que entiendas lo que busco jeje.
Mil Gracias!
Buenas Alex,
Para ajustar la altura es precisamente con la opción de relleno inferior. En el vídeo en concreto que tu me dices yo puse 350px de relleno. Prueba reduciendo el relleno.
Un saludo
Si lo pongo a 350px como tu me has dicho, me corta la imagen. Es como si el video no se ajustara a las dimenisones del slide. Si entras en el dominio podras verlo. Que mas puedo hacer? tendra que ver con la resolucion del video? He intentado hacerlo igual que tu, pero no me queda igual.
Hola Alex,
Probablemente en el que yo he puesto se corte una parte del vídeo también pero como no hay letras en el vídeo pues si se corta un trozo no pasa nada. Tienes la opción de jugar con el relleno inferior, probar con otras dimensiones de vídeo (a la hora de la creación) o probar a subir los textos para que luego no se corten al reducir la altura del vídeo.
Un saludo
Hola! Muchas gracias por tu ayuda, finalmente he conseguido que me quede como yo queria. He tenido que volver a editar el video y subir los textos para que se vieran mejor.
Mil gracias!
Hola! estoy intentando meter un video en el slide principal de la web, Que resolución es la optima para que cuadre todo bien?
Me gustaria que quedara en las mismas dimensiones que tienes publicado tu en la web que has puesto.
Hola Alex,
El vídeo del ejemplo de la web tiene 1280×720 px (qué son las dimensiones de vídeo en HD) Y 30 fotogramas por segundo
Un saludo
Hola Joaquín,
Gracias por tu rápida respuesta y mas aun siendo vacaciones :).
He colgado el video en la web que estoy haciendo en 1280×720 como tu me has indicado, pero se me queda cortado por la mitad, el slide corta la imagen. He leido que decias que debia ajustar los rellenos superior e inferior de los ajustes avanzados de dicho módulo. Estoy intentándolo, pero no hay manera, pongo el relleno inferior a -200px y nada, lo pongo a 200px y se me corta mas aun la imagen del video. Que puedo hacer?
Hola Alex,
Dime cual es el dominio de tu web para que véa como queda el vídeo en la página web y que parte se corta.
gracias
Un saludo
Perdona el doble post. Ya he conseguido que se vea completo, pero ahora se me ve a pantalla completa de la web y me gustaria que quedara tal y como lo tienes tu en la web que has mostrado. Como puedo hacerlo??
Un saludo!
Buenas Alex,
Por favor indícanos como lo has resuelto, para que pueda servir a otros usuarios.
El que yo muestro en el ejemplo también es a pantalla completa, no se a que te refieres.
Un saludo
Hola estimado Joaquín:
Excelente tus aportes en este estupendo blog. Tengo también un problema con la altura del video en Divi, éste me sale recortado casi a la mitad. Pongo valores en altura y ancho y no hay caso, no logro ver mi video en el tamaño correcto. Que puedo hacer?
Saludos.
Buenas,
Los que teneis problemas con la altura del vídeo probar en la pestaña: «Ajustes Avanzados de diseño» del módulo una opción denominada «Relleno inferior». Ir probando a introducir cantidades para ir aumentando la visibilidad de la parte inferior del vídeo.
Un saludo
Hola Joaquin!!
Vaya pedazo de blog que te mandas!!
Para principiantes como yo, viene de maravilla.
Estoy maquetando con el Divi 2.7. Todo bien hasta hace unas horas. De repente, sin haber alterado NADA (ni plugin, ni modificaciones en personalización de la plantilla ni ná de ná), la vista previa no se corresponde con el resultado.
Me explico: he configurado unos campos de un formulario para que sean transparentes. Pues bien, cuando actualizo, el resultado no refleja dicha transparencia.
Alguna explicación para eso?
Gracias por tu respuesta.
Hola José,
Si estás utilizando algún plugin de Caché borra la caché.
Create un página de pruebas e investiga sobre esa transparencia que estás intentando hacer.
Un saludo
Hola Joaquin,
Acabo de colocar el video, pero no se ve completamente en altura. A lo largo no hay problema pero como aumento la altura para que se vea completo?
Hay manera de quitar el sonido? Y hay manera de que se reproduzca una vez y no todo el tiempo?
Gracias
Hola Elena,
imagino que te refieres a la plantilla Divi y al Divi Builder. Tienes dos campos para introducir el tamaño del vídeo: Anchura de vídeo de fondo y altura de vídeo de fondo.
Dede aquí no se puede quitar el sonido. El sonido lo debes quitar con un programa de edición de vídeos.
No se puede hacer que se reproduzca una sola vez.
Un saludo
Amigo, tengo un problema al poner el divi en multisite, pues no me reproduce los vídeos background, esto me pasó cuando agregué un sitio más, crees que tenga algún problema wordpress multisitio con eso? porque tengo uno con único sitio y sin problemas me funciona.
Saludos.
Buenas,
Pues no se si puede ser motivado por utilizar un multisite. Te recomiendo que lo plantees en el foro de soporte de Elegant Themes.
Un saludo
Buenas, tenía una duda, yo uso Avada, y quiero poner un video de fondo, el tema es que lo pongo y se ve, pero pierde mucha calidad respecto al original subido en vimeo. Yo no tiro de hosting para el video, si no que lo «embebo» desde el propio vimeo, y allí está en HD, pero viendolo en mi web y viendolo en vimeo al mismo tamaño, la perdida de calidad es considerable.
A ver si me pudieses echar un cable. Uso el Page Builder de Avada y lo he probado tando creandolo con la opción que trae por defecto para añadir videos de vimeo, como poniendolo de background de una caja a 100%.
Gracias y felicidades por tu blog.
Hola Enrique,
Con la plantilla Avada no te puedo ayudar mucho, ya que la he usado una vez y fue ya hace tiempo. Ahora sólo utilizo la plantilla DIVI.
a.- Asegúrate que no hay ninguna opción en Avada para configurar la calidad del vídeo.
b.- Haz una prueba cargando el vídeo en el hosting en vez de en Vimeo a ver que tal. Como he comentado al final del post, hace poco he incluido un vídeo de 14MB en una web y la verdad es que la página carga bastante bien (esto también va a depender mucho del hosting).
Un saludo
Podras darme ejemplo de paginas con background a modo video?
Gracias
Hola Gaston,
En la demo de divi tienes un vídeo en la home
Un saludo
Buenos días Joaquín,
Yo tengo una gran duda. En mi empresa vamos a lanzar una nueva web y están valorando la posibilidad de que el background sea un vídeo y no imagen (en html5, no la realizaríamos con wordpress). Primero aparecería el vídeo y más abajo texto y demás información pero me da miedo que afecte al posicionamiento de la web. Crees que podría afectar notablemente añadir el vídeo o sería mejor dejar una imagen fija? Puede ser contraproducente poner un vídeo en la home de cara al cliente o de lo contrario llamaría más la atención? Muchas gracias de antemano. Un saludo!
Hola Sandra,
1.- El vídeo a modo de background afectará negativamente al SEO sólo en el caso de que la página tarde mucho en cargarse. Si por el contrario la página web carga rápido no afectará negativamente al SEO.
2.- De cara al cliente puede ser muy llamativo y por tanto positivo (te diferenciará de tu competencia). Pero también es cierto que cuando un cliente ya ha visto el vídeo y vuelve a la web otra vez, seguramente el video en bucle le resulta menos interesante y más pesado.
En definitiva, si la web tarda poco en cargar puede ser una buena opción. (Probablemente lo más recomendable es que el vídeo no aparezca en formato móvil o tablet)
Un saludo
Hola mira haber si me pudieses ayudar sobre este tema en concreto. Mira yo subo la foto de fondo y pongo el video pero resulta que en el pc lo veo perfecto pero en telefonos moviles y tablet no me aparece, quiza solo quiza puede ser que tenga que subir la url al servidor, esta hecha con divi.
Muchas Gracias
Atte
Hola Julio,
Divi muestra en el móvil la imagen de fondo en vez de el vídeo, ya que el tiempo de descarga de la página podría ser muy elevado, con el consiguiente empeoramiento de la experiencia del usuario y en el posicionamiento. Ten en cuenta que los móviles tardan mucho más en descargar una página que los pc de sobremesa (no se si esto ha cambiado en la última versión de DIVI). En cualquier caso no es buena idea que el vídeo aparezca en el móvil.
Un saludo
Buenas se puede poner este tipo de videos utilizando otros web builders como el siteorigin por ejemplo. gracias
Hola Ion,
Si, existen muchos page builder con los que se pueden poner vídeos.
El page builder que comentas no lo he usado nunca, así que no se si lo permitirá.
Un saludo
Buenas Joaquín,
El problema que yo tengo al hacerlo en WordPress es que el vídeo no se me ve en dispositivos móviles. Y no es porque tarde en cargar, ni porque pese, ni nada de eso. Simplemente no se ve. No sé si es una limitación de la plantilla en concreto (estoy usando la Brooklyn que es de pago en Themeforest) o si de WordPress directamente. ¿Se te ocurre algo para conseguirlo?
Gracias
Hola Carolina,
Estoy casi 100% seguro que no tiene nada que ver con WordPress.
Seguramente es algo de la plantilla que estás utilizando. Pueden ser dos cosas:
a) que la plantilla por defecto no muestra los vídeos en dipositivos móviles para que la carga de la página sea más rapida.
b) que exista una opción en la plantilla para no mostrar el vídeo en dispositivos móviles (hay varias plantillas para WordPress con esta opción) y que esta opción esté activada.
Yo creo que lo mejor es que lo gestiones a través del foro de tu plantilla. Aquí tienes el enlace al foro de la plantilla Brooklyn
Un saludo
Buenas, tengo un problema al integrar los vídeos, y es que los corta por la mitad o más y no hay manera de arreglarlo. Tiene alguna solución?
Buenas Pedro,
No me había pasado antes, como no sea porque ocupan demasiado. ¿Cuantos megas te ocupan los vídeos?
Un saludo