Slider de Video en WordPress - Videos de Fondo con Reproducción Automática
Convierte tu página web estática en un sitio web dinámico. Usa un video MP4 de fondo y dale vida a esa página de inicio con una especie de slider. Aprende a modificar un video para hacerlo muy eficiente y subirlo a tu web sin volverla pesada. De esta forma no altera el puntaje en PageSpeed ni los tiempos de carga.
He dividido el video en dos partes, en la primera les enseñaré a preparar el vídeo usando cualquier editor de vídeo o incluso VLC para que pese menos de 5mb y en la segunda parte les explicaré como añadir este vídeo a su página web sin y con plugins. Recuerda, yo uso en este video el editor por defecto de Wordpress Gutenberg. Sin embargo, pueden usar su plugin o editor de confianza como Elementor.
Recuerden por favor, un buen servidor les ayudará a tener un sitio web muy eficiente y rápido. Esto nos ayuda a no perder relevancia en PageSpeed y así mismo, salir en Google. Es por esto que recomiendo los servidores de Hostinger. Son rapidos, seguros, llenos de herramientas y con planes muy económicos.
No se queden con las dudas, en los comentarios les estaré ayudando con lo que necesiten
He dividido el video en dos partes, en la primera les enseñaré a preparar el vídeo usando cualquier editor de vídeo o incluso VLC para que pese menos de 5mb y en la segunda parte les explicaré como añadir este vídeo a su página web sin y con plugins. Recuerda, yo uso en este video el editor por defecto de Wordpress Gutenberg. Sin embargo, pueden usar su plugin o editor de confianza como Elementor.
Recuerden por favor, un buen servidor les ayudará a tener un sitio web muy eficiente y rápido. Esto nos ayuda a no perder relevancia en PageSpeed y así mismo, salir en Google. Es por esto que recomiendo los servidores de Hostinger. Son rapidos, seguros, llenos de herramientas y con planes muy económicos.
No se queden con las dudas, en los comentarios les estaré ayudando con lo que necesiten
Transcript
00:00y así pasaríamos de esto a esto muchachos un diseño mucho más dinámico
00:06hola muchachos espero que tengan un excelente día les habla Dustin Hurtado
00:09muchachos vamos a aprender a colocar un vídeo de fondo en nuestra página web
00:14para que se vea mucho más dinámica la página ok bien dividamos este vídeo en
00:18dos grandes fases 1 la modificación del vídeo este vídeo pesa 54 megas es
00:24imposible que lo subamos a una página web no tiene ningún tipo de eficiencia y
00:282 a publicar ese vídeo en nuestro sitio web o sea modificar eso con wordpress
00:33ok bien entonces la primera fase será modificar el vídeo por lo cual qué
00:37vamos a hacer vamos a usar cualquier editor de vídeo en este caso yo voy a
00:41usar mova video editor sin embargo pueden usar camtasia pueden usar filmora
00:45pueden usar premiere pueden usar el que ustedes desean en este caso voy a añadir
00:49mi medio voy a arrastrarlo a la línea de tiempo y la primera recomendación será
00:53que el vídeo no debe durar más de 20 segundos es más con que dure 10 segundos
00:58es más que suficiente por ejemplo este vídeo dura 6 segundos y es más que
01:02suficiente para lo que queremos ok bien en este caso vamos a dar de una vez en
01:06exportar y al grano compadre el vídeo tiene que ser en mp4 para una página
01:10web es el más eficiente de todos vamos a darle avanzado y especificamos lo
01:15siguiente esto que voy a explicar no es para que lo hagan en movavi lo pueden
01:19usar en cualquier editor vale por ejemplo resolución para qué usamos 4k
01:24si 1920 x 1080 o sea full hd es más que suficiente no requiere más full hd ahí
01:31estamos bien fotogramas por segundo con 25 fotogramas por segundo está perfecto
01:36y por último tasa de bits esto sí es lo más importante de todo porque
01:41determina el tamaño del vídeo en cuanto a peso así que vamos a darle
01:45personalizada y yo recomendaría entre 3500 y 5000 kilobits por segundo ok ya
01:52con esto la velocidad de audio bueno el audio realmente no nos importan estos
01:55vídeos porque no se va a reproducir audio es sólo vídeo ok recuerden
01:59resolución fotogramas por segundo y tasa de bits por si están buscándolo en
02:03premiere son sólo esos tres lo que hemos modificar vamos a darle a aceptar y
02:07démosle iniciar en este caso vamos a comparar los dos vídeos el primero
02:12pesaba 54.4 megas el segundo pesa 2.6 megas como vemos el cambio es brutal
02:19ahora usted me dice dos yo no tengo ningún editor de vídeo a mí este vídeo
02:23realmente no lo puedo seguir ok no se me preocupe vamos a hacerlo entonces con el
02:28vlc que es un reproductor de vídeo 100% gratuito parecerán muchos pasos pero no
02:34lo son son los mismos vea medio convertir hasta ahí vamos bien cierto
02:39qué vídeo desea convertir vamos a añadir el vídeo el pesado y démosle
02:44abrir que sería el original ok convertir ahora que vamos a convertir
02:49con qué perfil pues vamos a usar el famoso mp4 que sería el mismo h264 y
02:54vamos a modificar porque queremos modificar porque no queremos audio el
02:59audio es innecesario y en cuanto al vídeo aquí veníamos lo mismo que
03:04hicimos ahorita tasa de bits pues era entre 3500 y 5000 o sea si no le gusta
03:09cómo se está viendo el vídeo pues modifiqué la 4000 o 4500 hasta 5000 y
03:13tasa de fotogramas será 25 fotogramas por segundo ahora si miramos este vídeo
03:19es 4k por lo cual es muy grande para la página web así que pasemos a resolución
03:24y démosle un tamaño del marco por ejemplo ancho 1920 y altura 1080 ahí
03:31queda full hd no tenemos que hacer nada más es lo mismo resolución tasa de bits
03:37y fotogramas es exactamente lo mismo que hicimos ahorita démosle guardar y ahora
03:41indiquemos un archivo de destino donde queremos exportar este vídeo así que
03:45exploremos voy a usar la misma carpeta pero cambiándole el nombre por ejemplo
03:49como nuevo vídeo y ahora sí iniciar esperamos un momento que termine de
03:54cargar y listo aquí debería aparecer nuevo vídeo que pesa 2.4 megas y la
04:01comparación con el original que son 54 es brutal sigue siendo fantástica la
04:06comparación ok entonces ya tenemos el vídeo final que queremos en nuestra
04:10página web así que empecemos en la segunda fase de este vídeo publiquémoslo
04:15en nuestro sitio web el primer paso que usted de tener en cuenta es que ojalá su
04:19página esté alojada con hostinger ya que pues hostinger le da la capacidad
04:23para que cualquier página web en cualquier plan pueda tener la capacidad
04:28para que reproduzca este vídeo sin ningún tipo de problema sin embargo
04:32ahorita les muestro una manera eficiente de resolver este problema en caso de que
04:35su servidor no sea tan rápido e igual este precio que ustedes están viendo
04:39acá no es el precio final recuerden que yo les voy a dar un copón de descuento
04:42al final de este vídeo por ahora continuamos por ejemplo vamos a ir a
04:46escritorio vamos a editar esta página y aquí vamos a agregar entonces el vídeo
04:51hay muchas formas de hacerlo en wordpress muchas desde instalar un
04:56plugin para que lo haga hasta usar un bloque que viene por defecto que se
05:00llama fondo este bloque es para colocar un vídeo o una imagen de fondo y
05:05poderle colocar este tipo de texto encima funciona de maravilla y sólo hay
05:09que tener en cuenta lo siguiente si lo llegan a agregar por ejemplo aquí por
05:13favor especifique le en esta opción que es de ancho completo sinceramente a mí
05:18poco me gusta porque no es tan eficiente me gusta que ustedes instalen el plugin
05:23espectra porque este plugin espectra les agrega todos estos bloques que están
05:27viendo en azul de manera 100% gratuita entre ellos un contenedor que maneja
05:32columnas me explico mire si lo agregamos le podemos indicar que va a ser de una
05:37sola columna porque es de ancho completo es más especificó en la parte
05:41derecha que es de ancho completo ok bien en cuanto a estilo vamos a darle no un
05:46color no un degradado no una imagen sino un vídeo y en el caso de vídeo démosle
05:52cambiar vídeo vamos a agregar acá el videíto sólo tenemos que arrastrarlo
05:56mire vamos a colocar el que exportamos del editor de vídeo una vez subido
06:00vamos a darle seleccionar técnicamente hablando aquí ya debería estar
06:04reproduciendo el vídeo si miramos aquí en vista previa ahí debería estar el
06:08vídeo que lo que en esta franjita porque no le hemos dado la altura así
06:12que démosle clic en un bloque general y vamos a darle altura mínima por ejemplo
06:16de 600 píxeles bien ahí está la altura mínima así que de nuevo vamos a
06:21previsualizar y mírenlo ahí este vídeo va a reproducir en loop o sea va a
06:26reproducir de manera indefinida por eso les decía que 10 segundos es más que
06:30suficiente ahora qué podemos hacer con este vídeo lo bonito es que primero
06:34démosle un clic y pasémoslo para arriba este videíto al colocarlo de esa forma
06:38podemos pasarle digamos el contenido que tendríamos en otro lado mire podemos
06:42sobre ponerle contenido o podemos incluso añadir nuevos bloques por
06:47ejemplo botones miren botones y podemos llevarlo aquí
06:53obviamente todo eso se puede personalizar y le podemos dar vista
06:56preliminar para que ustedes vayan mirando cómo se va comportando miren ahí
07:00está perfecto ok esto de acá abajito ya no nos interesa por lo cual podemos
07:04eliminar todo este bloque los punticos borrar bien hasta ahí vamos muy bien qué
07:10podemos hacer vamos a darle en estilo y aquí algo llamado imagen alternativa
07:15obviamente está en inglés que es imagen alternativa que en el remoto caso de que
07:19no se puede reproducir este vídeo porque pesa mucho o porque el navegador no es
07:23compatible pues me va a reproducir una imagen reproducir entre comillas así que
07:28coloquemos por ejemplo una imagen cualquiera que pesa 93 kilobytes y no
07:32las famosas 2.4 megas que teníamos en el vídeo por lo cual seleccionamos esta
07:37imagen y en el caso de que no reproduzca el vídeo va a reproducir la imagen ok o
07:42antes de reproducir el vídeo pues va a reproducir la imagen para que sea mucho
07:45más eficiente ahora si el vídeo les estorba mucho para el contenido podemos
07:49darle un tipo de superposición por ejemplo un color blanco y podemos darle
07:54una opacidad de tal manera que el vídeo quede como de fondo esto es opcional
07:59obviamente miren vamos a darle reproducir y ahí está vale en cuanto a la altura
08:03recuerde que todo se puede modificar y también es responsive mire tanto para
08:08celulares como para tabletas y bueno para computadoras ya como ésta ok
08:12entonces de resumidas cuentas usted me dice Dustin pero es que yo no tengo el
08:15plugin espectra yo no tengo el fondo yo no tengo hombre cualquier tipo de plugin
08:20que haga sliders o carrusel acepta vídeos lo más importante como tal de
08:25este vídeo es que usted aprenda a exportar el vídeo de forma correcta para
08:29que sea muy liviano listo y aparte de eso lo segundo más importante aparte de
08:34wordpress obviamente es que usted aprenda a elegir un plan correcto en
08:38términos generales el premium funciona muy bien para páginas web cualquier tipo
08:43de página y el business si quiere una tienda o quiere algunos elementos
08:47adicionales como IP dedicada o un cdn o el famoso woocommerce que será para las
08:51tiendas ahora independientemente del plan que elija o el país en donde se
08:55encuentre podemos darle elegir plan y en la parte inferior aquí abajito donde
09:00dice copón de descuento van a escribir Dustin Hurtado todo pegadito si le dan a
09:05aplicar vamos a volver arriba vemos que el descuento que aplica pues es bastante
09:10porque son 48 meses con dos gratis con 30 días de garantía de devolución de
09:15dinero aproveche ser siempre clientes nuevos para adquirir el mayor plan ya
09:20que es el que más tiene descuento recuerden los precios de renovación no
09:23tienen tanto descuento por eso aprovechen ser clientes nuevos bueno
09:28muchachos básicamente son todo lo que puedo explicarles y aconsejarles en este
09:31vídeo si tienen cualquier duda cualquier pregunta para eso están los comentarios
09:35no se queden callados pregunten recuerden muchachos el conocimiento es
09:41para todos les habló Dustin Hurtado y nos vemos en un próximo tutorial
09:44suscríbete digo hasta luego