En este vídeo te resumo y cuento algunos aspectos importantes si pretendes usar vídeos como fondos en tu proyectos Webs.
Tic tac, tic tac … ¿conseguiré hacerlo en 25 minutos? Si es que no debería haberme puesto ese reto que ahora cada post que publique me voy a poner el cronómetro. Jajaja.
¡Hola que tal! ¿Cómo vas por ahí? Espero que bien, que tan bien como yo porque ésta es mi última tarea de la semana. Suena bien, ¿no? Así que la voy a hacer rápido, lo mejor que pueda y con una súper sonrisa en la cara. ¿Tu tienes planes para este finde? ¡Yo esta noche me voy de concierto a ver [piopialo]a los hombres G! Vale, que ya les podemos añadir una B delante: “hombres BGstorio”[/piopialo]. Pero mira, todavía dan caña y pienso pasármelo muy bien.
Pero antes, contarte que, tras leer uno de los últimos artículos en el blog de Elegant Themes, que reza algo así como “Videofondos para WordPress: cuanto y cómo usarlos”, me acordé de aquella vez que lo hice en uno de mis proyectos y que te publiqué un artículo presentándote el formato WebM. ¿Te acuerdas?
Pero, de ahí a aquí, he leído y mejorado mucho, sobre todo en el uso de herramientas para convertir y en mejores prácticas. Eso es lo que me gustaría compartir contigo en este post.
Tabla de contenido
Mejores Prácticas
Usar vídeos como fondos, sobre todo en Landing Pages o en la página principal, los dota de un grandísimo impacto visual que puede aumentar la percepción de valor, atención y agrado (conversiones) de tus visitantes.
Pero siempre debemos tener cuidado porque, usado de forma incorrecta, puede tener el efecto totalmente contrario.
Por eso he considerado súper interesante compartirte estos consejos que leí directamente en este artículo y que creo que te pueden ir muy bien.
- Utiliza vídeos muy simples con altos contrastes. Salvo que el propio vídeo constituya tu objetivo principal, cosa que no suele ser así, intenta utilizar vídeos que sean hiper sencillos para dotar de movimiento la web si acaparar toda la atención y que ejerzan un alto contraste con el texto, claim y llamadas a la acción que coloques sobre ellos. Es muy importante que la atención se termine centrando, lo antes posible, en el slogan, texto y botón que colocas sobre ellos. El contenido es mucho más importante. Por norma general, utiliza textos muy claros sobre vídeos muy oscuros o la inversa.
- Siempre en silencio. Es posible que en un caso muy remoto, debas ofrecer la opción de activar el sonido. Pero, por norma general, nada de sonido. Es súper molesto (y no funciona en algunos móviles) que entres en una web y ésta empiece a sonar. No, no y mil veces no. Si tu video depende del audio, de modo que no puedes eliminarlo, entonces ese no es una buena elección para ponerlo de fondo. Puntico, que es gerundico.
- Scroll con Paralax para ocultar el vídeo. La combinación de un buen vídeo de fondo con el efecto Paralax que hace como que se va ocultando tras una ventana conforme vamos haciendo Scroll es tremendamente bonita. Este efecto, que puedes ver un ejemplo en esta web, es alucinante y dotará de un aspecto muy moderno a tu web.
- Utiliza los formatos MP4 y WebM. Es decir, utiliza los formatos más compatibles con los navegadores actuales. El segundo es mucho más ligero y eficiente y el primero mucho más compatible (con casi todos los navegadores, incluso móviles). Si tienes la oportunidad (muchas veces si), incluye ambos formatos y te asegurarás el máximo de compatibilidad.
- Optimiza al máximo. Que sepas que esta es mía, no te pienses que es un post con todo copiadico. Que ya te veía poniéndome ojitos… En mi experiencia, algunos clientes con hostings malos han optado por quitar el vídeo porque tardaba mucho en cargarse. Pude comprobar que no estaba 100 % optimizado. Intenta, en la medida de lo posible, que el vídeo sea lo mínimo posible para que el efecto no quede cutre (si se pixela o es demasiado corto como para apreciarse saltos, su efecto es el contrario).
Enga, que vamos bien de tiempo. ¿Seguimos?
Dónde conseguir vídeos
Apufff, con el post de Elegant Themes que te he enlazado al principio tienes una selección más que suficiente de fuentes donde encontrar vídeos muy chulos. Pero como este es otro post, permíteme recomendarte:
- Shutterstock. Los vídeos que encuentro en este Marketplace son realmente alucinantes y su calidad es superior. Si buscas resultados súper profesionales, si buscas calidad de verdad, me quedo con este.
- Videohive. En la mayoría de mis proyectos opto por esta opción que está más equilibrada en relación calidad/precio. No siempre consigo el efecto tan profesional del anterior, pero en muchas ocasiones me ha resultado suficiente y tengo un catálogo para aburrir.
¿De donde sacas tu los vídeos? ¿Has comprado alguna vez vídeos? Otrás!! Espera!! Que todavía no tocan las preguntas!
Herramientas de conversión
Otro de los aspectos súper importantes son las herramientas de conversión. Probablemente, cuando compres el vídeo te verás en la tesitura de tener que cambiar el tamaño, framerate, duración y, por supuesto, el formato para conseguir que esa compra de cientos de megas que tienes en un ordenador se convierta en un vídeo de apenas 1Mb optimizado para ser usado como fondo.
En este caso, permíteme ofrecerte opciones gratuitas.
- Firefogg. Esta extensión libre para Firefox es la que yo vengo usando casi siempre y es una auténtica pasada. Gratuita, rápida y efectiva. Si te reconozco que alguna vez me ha creado vídeos que luego no han sido compatibles con algunos navegadores, pero son pocas.
- Handbrake. Aplicación gratuita de escritorio, rápida y muy fiable. También la he ido usando, más últimamente y me gusta bastante salvo por el hecho de que no permite exportar a WebM (VP9). Cachisenlamar …
- MiroVideoConverter. Yo esta no la he probado pero he leído que es bastante fiable, rápida y buena. También gratuita y con un aspecto visual mucho más moderno. ¿La has probado tu? ¿Qué tal te ha ido con ella?
- Ffmpeg. La solución para los “que pilotan cantidad del tema y no les da miedo ponerse con el terminal o la línea de comandos”. Esta librería, cuyos binarios puedes descargar para Linux, Mac o Windows, es un estándar, funciona muy bien, etc… Pero es que es feo hacerlo con esto. Muy feo.
Ahora si. Herramientas compartidas.
Conclusiones finales
Ey!! ¡Llevo 20 minutos escribiendo! Vale que ahora, mientras publico, imagen y todo se me van a ir otros 20, pero algo es algo, ¿no?
Por cierto, que me acabo de acordar que justo hoy me he cruzado con un post de Paula en Enredando Por la Red que hablaba de “Cómo crear posts de tipo How To”. Acho, me he dicho con cara condescendiente, ¿ver por qué tienes que investigar antes de publicar?. En fin, pues que sepas que no ha sido copieteo ni espiamiento, has sido coincidenciuqui. Por eso te dejo aquí el post para que tengas el mix completo: “Cómo escribir un buen post con el formato COMO”.
Ea, dicho esto, volvamos a los vídeos. ¿Tu los usas en tus proyectos Webs? Yo si, pero no en todos. ¿Lo habías hecho alguna vez? ¿Estas de acuerdo con que ofrecen un buenísimo impacto visual? ¿Qué contras se te ocurren? ¿Tu eres de cerveza o minis en los conciertos? ¡Amos que nos vamos!
Víctor, estamos conectados! jajajaja
Muchas gracias por referenciar nuestro artículo 🙂 En cualquier caso, pese a la coincidencia en el tema, creo que ambos artículos son totalmente complementarios. Y ya sabes que yo soy fan desde el principio de tus series sobre Cómo…. en 20 minutos! Aunque en mi caso nunca lo consigo 😉
Con respecto al post de hoy en cuestión… yo confieso, que el tema vídeos es mi asignatura pendiente (entre otras). Habrá que ponerse! no?
Y, antes de irme, yo confieso también que hace unos meses fui también a pegar botes y a recordar viejos tiempos a un concierto de Hombres G cuando se dejaron caer por Alicante…. De pequeña era mega fan. ¿Quieres una última confesión? Pero que no se entere nadie eh? David Summers era mi amor platónico cuando tenía la tierna edad de 8 o 9 años…. jajajaja Ahí es nada!
Y dicho esto…. Buen finde! Y un besazo enorme!
Ey Pau!!
Empezar la semana respondiendo un comentario tuyo es un chute de buen rollo y energía. Gracias!!
Gracias por tu comprensión y por comentar que los artículos se complementan. Creo que he demostrado que para escribir «en 20 minutos» es necesario saltarse algunos pasos, como el hecho de mirar si otros han publicado algo parecido. Jajajajaja. Sorry!
En cuanto a lo de los HG, la verdad es que se marcaron un conciertazo de agárrate. Estuvo genial y, a pesar de 2 horas y pico, se me hizo súper corto. Lo mejor fue vernos de nuevo de concierto, con nuestras cervezas en vaso de plástico. ¡Ganas había!
Y si, Consuelo también se veía las pelis de pequeña, tu amabas a David y yo los odiaba. Eran demasiado comerciales para la música raperilla y los ideales contra el racismo y el servicio militar que yo perseguía … Jajajaja.
Abracitos Pau!
Escribir todo esto en tan solo 20 minutos es una auténtica pasada! Para hacerlo es necesario tener muy claro la estructura que le quieres dar y ser bueno para pasarlo de tu mente a papel. Quizá he visto algunos errores de puntuación (de aquellos que de primeras parecen cambiar un poco la frase) pero nada, casi te doy un 9 😉
El contenido en cuestión es genial y me viene como anillo al dedo. Tengo un proyecto a medio hacer que le vendría muy bien un vídeo en la landing 🙂
Útil como siempre Víctor!
Hola Eduard!!!
Muchas gracias. La verdad es que hace falta práctica y, cuando terminas, tienes la sensación de que la cabeza te va a estallar, pero poderse … mas o menos. Jajajaja.
Me alegra, para variar, que te resulte útil este post y querría ver cómo queda ese súper proyecto. Seguro que lo clavas. Por otro lado, decirte que tienes todas las puertas abiertas si necesitas «un cable» para ese proyecto, en un momento dado, de algo que humildemente pueda ayudar. Digo humildemente porque no creo que haya demasiadas cosas que yo pueda hacer y tu no las pilotes.
Abrazos!! 🙂
Muchas gracias por tu ofrecimiento Víctor y claro que puedo aprender mucho de ti. Sin ir más lejos el gran plugin que has creado, ya me gustaría a mí saber hacer algo así.
A ver si saco tiempo y hago algo en plan modestillo en ese ámbito.
Claro que si Edu! Ya sabes que el tiempo se saca cuando uno quiere, solo es cuestión de prioridades. Para cuando decidas hacerlo, yo intentaré estar disponible para compartir mi propia experiencia contigo.
Abrazos!
Yo la verdad no he pensado en este tema, aunque llevo viéndolo desde hace tiempo en Airbnb y esta semana la vi en otra página, pero ya no logro encontrarla y mi historial es infinito 🙁
En fin, que mola pero no sé si lo haría para alguno de mis blogs, creo que sería mucho trabajo y no estoy capacitada (de momento) para ello. Tal vez aprenda con el tiempo, pero hoy no me interesaría aplicarlo. Aunque sigo diciendo que es una pasada 🙂
Un abrazo, todavía seguimos en Israel. Últimos días!!!
Hola Di!!
Lo bueno es que ya sabes que se puede, que no es tan complicado como parece y que es un efecto bastante chulo. Yo tengo planificado para Agosto hacer una nueva web para mi Agencia y grabaré varios vídeos sobre cómo hacer algunas cosas, entre ellas esto.
Abrazos para Israel!! (Por cierto, necesito una dirección tuya!!!) 🙂
Es verdad, al menos ya se algo nuevo 🙂
En cuanto a la dirección, pues oficialmente tengo una, pero como verás lo único que te puedo dar es mi dirección de e-mail, ahí me ubicas más rápido y seguro jajaja 🙂
Tu dirección de email la tengo, aunque me hubiese gustado mandarte algo más «tangible». Pero bueno, lo que haré será enviarte algo digital y seguro que llegará el día en que lo material será una cerveza (o manzanilla) juntos.
Abracitos!
Víctor, recuerda que te comenté que este ratón iba a publicar una entrada haciendo una versión de tu entrada de los 2o minutos. Es esta:
https://jerbycopywriter.wordpress.com/2015/06/15/cocinar-pergeno/
En ella, sigo otro tipo de estructura ARC
> Antecedentes
> Recetas
> Comentarios
El resto de detalles están en la entrada.
Sobre el tema de vídeos, yo se lo pregunto directamente al señor Google. Pero encontrar un vídeo que le venga bien a la entrada y que no vaya a dar algún tipo de problema no es tan sencillo.
En caso de duda, suelo elegir aquellos que creo que le podrían de servir de promoción al autor del vídeo.
Hola #Jerby!!
Pues muchas gracias por hacerlo, por demostrar que se puede hacer algo de calidad en 20 minutos y por la mención en el post. COmo siempre dejas huella en cada sitio por donde pasas y, a diferencia del resto de ratones del mundo, no es forma de cagaditas. 🙂
Un fuerte abrazo!
Yo voy a ser el crítico de hoy, ya que Jerby no te ha dado caña… jeje. Mi experiencia con los vídeos no ha sido especialmente buena.. Lo cierto es que pusimos un vídeo en la home de nuestra anterior web, y resultó un fiasco. En mi opinión, el vídeo si está en movimiento distrae al personal y yo ya no lo vuelvo a poner. Airbnb o Skype lo tienen y no acabo de pillarle el punto tampoco. Pero como todo, esto son opiniones personales…
Un saludo y gran post.
Hola Alfonso!! Muchas gracias por el comentario y por ser «el crítico» que ya sabes que adoro tener alguno. Hoy abrazo para ti!
Yo he tenido buenas y malas experiencias con el vídeo. En la nueva web de mi agencia de publicidad, probablemente lo ponga porque necesito mucho impacto visual. En cuanto a otras webs, como bien dices, hay que valorar muy bien si es posible que distraigan del objetivo de la web.
Muchas gracias por el comentario! 🙂
Hola Victor, no entendí muy bien, esos vídeos son como el de la página web de paypal?
Hola Diego! Efectivamente, a eso me refiero. En airbnb también tienes un buen ejemplo.
Saludos!
Gracias, ya lo he puesto en mi web el vídeo. El formato WebM no conseguí ponerlo en el WordPress, y hasta me decia que no se podia insertar por problemas de seguridad. Así que, lo hice con el mp4. En http://www.videvo.net/ tienes vídeos gratis de calidad para ir tirando. Luego usé el camtasia para moldear el formato para que quedara bien en la portada. El vídeo pesaba 43MB y ahora 500 kb. Primero usando cloudconvert.com y luego camtasia.
En líneas generales he quedado contento.
Un saludo
Hola Diego!!
Y tanto tío, me he metido y te ha quedado niquelado. Me gusta mucho como lo has dejado. Un vídeo corto y muy descriptivo. He de decirte que me ha cargado rapidísimo así que … BUEN TRABAJO! 🙂
Saludines! 🙂
Hola Diego, dónde lo tienes publicado? saludos.
Hola Fernando. Pinchando en su nombre se accede a su web y ahí se ve el vídeo.
Saludos!
Hola Víctor,
he visto algunas web cuyos vídeos tienen una especie de trama de puntos que le da un aspecto chulo, ¿sabes cómo hacerlo?
te pongo un link del efecto, pero es en una foto fija, pero lo he visto en varios vídeos tb ww.istakedu.com/
Hola Maxi!!
Muy buena pregunta men! Te comento. Se llaman pattern overlays y, aunque creas que se ponen por «bonitos», en realidad es una técnica que se usa para amortiguar la reducción de calidad que deben sufrir los vídeos para cargar rápido en Internet.
Vamos, que como hay que reducirlos al máximo para que carguen rápido, se les pone un patrón por encima que disimula la mala calidad. En vez de ver pixelado, lo ves «patternado».
Aquí tienes un ejemplo de cómo hacerlo con html y css: https://codepen.io/songyima/pen/vXxAKK
Espero que te sirva de ayuda! 🙂
No recomiendas poner un video de youtube por lo que veo? Para evitar peso.