Vídeo en inglés
(dispone de subtítulos en español generados automáticamente)
YouTube o Vimeo
Cuando se trata de vídeos en sitios web, casi siempre se quiere utilizar algún tipo de servicio, normalmente YouTube o Vimeo. Yo recomendaría Vimeo, porque es una de las principales características de este servicio y les gusta que se utilice de esta manera. Por otro lado, YouTube no ve con buenos ojos que se publiquen vídeos fuera de su dominio y siempre lo pondrá más difícil y menos eficaz.
Añadir un reproductor de vídeo
Premium Minimalio añade bloques Gutenberg personalizados, que son iframes de Vimeo y Youtube. Puedes utilizarlos para añadir reproductores de vídeo a tu sitio web. Añade siempre un ID de tu vídeo y elige la relación de aspecto del mismo. El bloque iframe de Vimeo también añade la opción de cubrir el reproductor con una imagen y un botón de reproducción grande.
Añadir un banner de vídeo
Un banner de vídeo es una sección del sitio web en la que se reproduce automáticamente un vídeo, con botones de reproducción/pausa y silencio. Es especialmente interesante para configurarlo como página de inicio, ya que queda totalmente cubierta por el vídeo. Está disponible tanto con Vimeo como con YouTube, pero Vimeo vuelve a ser la mejor opción. Los bloques de Gutenberg se llaman banner de Vimeo y banner de YouTube. Si quieres utilizar el banner para cubrir toda la página de inicio, ve a Opciones de Minimalio -> Encabezado y activa el encabezado transparente en tu página de inicio.
Incrustar un vídeo
Si no deseas utilizar los bloques personalizados de Minimalio Gutenberg, también puedes incrustar tus vídeos. Busca las opciones para compartir en Vimeo o YouTube y obtén el código HTML para incrustar tu vídeo. A continuación, utiliza el bloque de Gutenberg denominado HTML personalizado. Pega allí el código para incrustar.
Transcripción del vídeo
¡Hola! Hoy me gustaría hablar sobre cómo incluir vídeos en tu sitio web. Por desgracia, WordPress, y en particular Gutenberg, no es muy bueno gestionando vídeos. No sé muy bien por qué, pero quería que el tema Minimalio fuera muy eficaz en lo que respecta a los vídeos, sobre todo porque vengo del mundo del cine.
Cuando se trata de vídeos, casi siempre es mejor utilizar un servicio como YouTube o Vimeo para alojarlos. Aunque YouTube es muy popular, recomiendo encarecidamente utilizar Vimeo si es posible. Vimeo está diseñado para alojar vídeos y no muestra anuncios como YouTube. Mientras que YouTube quiere que los usuarios permanezcan en su plataforma para ver anuncios y recopilar datos, Vimeo ofrece una experiencia más profesional, a menudo sin anuncios, con más opciones de personalización.
La forma más fácil de añadir un vídeo a tu sitio web es utilizando un iframe. Puedes hacerlo buscando «Minimalio», «iframe», «Vimeo» o «YouTube» en las opciones de bloques de Gutenberg. Empezaré mostrándote cómo añadir un iframe de Vimeo y luego pasaré a YouTube.
Para Vimeo, selecciona el bloque iframe de Vimeo y, a continuación, elige el vídeo que deseas mostrar. Solo tienes que introducir el número de código del vídeo, no la URL completa. Una vez que añadas el código, el vídeo aparecerá en tu página. A continuación, puedes ajustar la relación de aspecto para garantizar que el vídeo se adapta a todos los dispositivos. Hay algunas opciones de personalización. Puedes ocultar el título y la información que se muestra en el vídeo, pero esto debe hacerse directamente en Vimeo. También he añadido una función en Minimalio que te permite cubrir el iframe con una imagen. Puedes seleccionar una imagen, elegir un color mediante un código hexadecimal y se mostrará un botón de reproducción grande sobre la imagen. Al hacer clic, se inicia el vídeo.
En YouTube, el proceso es casi el mismo. Solo tienes que elegir el bloque iframe de YouTube e introducir el ID del vídeo, que es la parte de la URL que aparece después del signo igual. Con YouTube, solo se puede ajustar la relación de aspecto, hay menos opciones de personalización que con Vimeo.
Otra función avanzada que he desarrollado se llama «Banner». Es perfecta para crear un fondo de vídeo a pantalla completa, como en la página de inicio del sitio de demostración de Tony. El vídeo cubre toda la página, lo que ofrece una experiencia dinámica y envolvente. Para crear un banner de vídeo a página completa, selecciona el bloque Vimeo Banner en Gutenberg. Puedes introducir la URL del vídeo directamente y establecer una imagen de fondo opcional. La imagen de fondo es útil porque se muestra mientras se carga el vídeo, lo que crea una transición más fluida. También puedes configurar el vídeo a ancho y alto completos, habilitándolo como fondo de la página de inicio. Si utilizas YouTube para el banner, la configuración es similar, pero no hay opción para una imagen de fondo. También puedes establecer una altura personalizada utilizando unidades VH (altura de la ventana gráfica). Esto te permite mostrar parte del contenido de la página debajo del vídeo ajustando el porcentaje de la altura de la pantalla que ocupa el vídeo.
También hay una opción para mostrar los vídeos de Vimeo en una ventana emergente dentro de la sección del portafolio. He explicado cómo configurarlo en el vídeo tutorial de la página del portafolio, así que échale un vistazo para obtener más detalles.
Si las opciones de iframe o banner no se ajustan a tus necesidades, por ejemplo, si no hay una relación de aspecto adecuada para tu vídeo, puedes utilizar la opción «embed» que ofrecen tanto Vimeo como YouTube. Al copiar el código HTML de incrustación de las opciones para compartir, puedes pegarlo en un bloque «HTML personalizado» en Gutenberg, que funciona igual de bien.
¡Eso es todo! Espero que esta guía te ayude a integrar vídeos a la perfección en tu sitio web Minimalio. ¡Gracias por ver el vídeo!
