Cómo añadir un vídeo de YouTube como fondo de pantalla completa en WordPress

A veces intentamos añadir nuevas formas de hacer que nuestros sitios de WordPress sean más atractivos y atractivas visualmente, y una de ellas es añadir un vídeo de YouTube como fondo a pantalla completa.

Cuando se utilizan correctamente, los vídeos de fondo pueden aumentar significativamente la participación de los visitantes y el tiempo que pasan en una página. También nos parece que son una forma estupenda de captar instantáneamente la atención de los visitantes y crear una primera impresión memorable.

En este artículo, le mostraremos cómo añadir un vídeo de YouTube como fondo de pantalla completa en su sitio web WordPress.

¿Por qué utilizar un vídeo de YouTube como fondo de pantalla?

Un vídeo de fondo atractivo y llamativo en la cabecera es una forma estupenda de conseguir que los visitantes se queden en tu sitio. Cuando los visitantes aterrizan por primera vez en tu sitio de WordPress, solo tienes unos segundos para captar su atención.

En la actualidad, muchos temas de WordPress son compatibles con fondos de vídeo. Sin embargo, la subida y alojamiento de contenidos de vídeo en WordPress puede consumir mucho ancho de banda.

Dependiendo de su plan de alojamiento de WordPress, puede que incluso tenga que comprar almacenamiento adicional.

En WPBeginner, te recomendamos encarecidamente que no subas tus vídeos a WordPress.

En su lugar, puede utilizar un servicio como YouTube e incrustar el vídeo como fondo de su sitio web WordPress. De este modo, podrás destacar entre tus competidores sin ralentizar tu sitio web ni afectar a la experiencia del usuario.

Dicho esto, vamos a ver cómo puedes añadir un vídeo de YouTube como fondo a pantalla completa en tu sitio web de WordPress. Te mostraremos dos métodos, y puedes usar estos enlaces rápidos para navegar entre ellos:

Método 1: Usar Fondos Avanzados de WordPress para Fondos de Video a Pantalla Completa (Gratis)

Si estás buscando una forma fácil y gratuita de añadir fondos de vídeo, entonces puedes utilizar Advanced WordPress Backgrounds.

Este plugin gratuito añade un bloque Fondo que permite crear un fondo a pantalla completa utilizando cualquier color, imagen o vídeo, incluidos los vídeos de YouTube.

En primer lugar, tendrá que instalar y activar el plugin en su escritorio de WordPress. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, simplemente dirígete a la página o entrada en la que quieras añadir un vídeo de YouTube como fondo a pantalla completa. En el editor de bloques de Gutenberg, haz clic en el botón “+” para añadir bloques.

En la ventana emergente que aparece, empieza a escribir “AWB en segundo plano”. Cuando aparezca el bloque adecuado, haz clic en él para añadirlo a la página.

En el menú de la izquierda, verás tres pestañas para los distintos tipos de fondos de ancho completo que puedes crear: Color, Imagen y Vídeo.

Si quieres añadir un vídeo de YouTube, haz clic en la pestaña “Vídeo”. Después de eso, elija la pestaña‘YouTube / Vimeo‘.

Ahora puede copiar y pegar la URL del archivo de vídeo de YouTube que desea utilizar en su blog de WordPress.

Ahora, el editor de bloques de WordPress mostrará una vista previa de cómo se verá este fondo.

Advanced WordPress Backgrounds cambia el tamaño del vídeo en función del contenido que añada encima, así que no se preocupe si el vídeo parece un poco pequeño.

Por defecto, el fondo de vídeo está desactivado en los dispositivos móviles.

Sin embargo, si desea mostrar el fondo del vídeo en dispositivos móviles, haga clic para activar el conmutador “Activar en dispositivos móviles”.

De forma predeterminada, el bloque reproducirá todo el vídeo de YouTube en reproducción automática y en bucle.

Otra opción es reproducir una parte específica del vídeo escribiendo las horas exactas en las casillas “Hora de inicio” y “Hora de finalización”.

También puedes evitar que el vídeo se reproduzca en bucle desactivando el conmutador “Bucle”.

Por defecto, el vídeo solo se reproducirá cuando el visitante pueda verlo en su navegador / explorador. Esto ayudará a mantener el rendimiento de su sitio web, por lo que normalmente querrá dejar desactivado el conmutador “Reproducir siempre”.

Cuando añades el vídeo por primera vez, se muestra con una opacidad del 100%, por lo que parece sólido. No dudes en arrastrar el carrusel / control deslizante “Opacidad de la imagen” para que el fondo del vídeo de YouTube sea más sutil.

Si experimentas con la opacidad, también puedes probar a añadir una superposición de color.

Basta con hacer clic para ampliar la sección “Color de superposición” y, a continuación, utilizar los ajustes para crear superposiciones de distintos colores.

No dudes en explorar otros ajustes, como el efecto de paralaje y el espaciado, para que el fondo tenga exactamente el aspecto que deseas.

Cuando estés satisfecho con cómo está establecido el fondo del vídeo de YouTube, es hora de empezar a añadir contenido como enlaces, textos e imágenes.

Para empezar, haga clic en el icono “+” situado en el centro del bloque Fondo (AWB).

Esto abre una ventana emergente donde puede elegir el bloque que desea añadir. El plugin Advanced WordPress Backgrounds funciona con todos los bloques estándar de WordPress, por lo que puede añadir cualquier contenido que desee.

Si añades texto encima del bloque, asegúrate de cambiar el color del texto para que se complemente bien con el fondo del vídeo.

Cuando esté satisfecho con el aspecto de la página, haga clic en el botón “Actualizar” o “Publicar” para activarla. Ahora, si visitas tu sitio web WordPress, verás el fondo de vídeo en acción.

Método 2: Utilizar Thrive Architect para añadir un fondo de vídeo a pantalla completa (Recomendado)

Si está buscando personalizar completamente su vídeo de fondo a pantalla completa o incluso diseñar fácilmente todas las páginas de su sitio web, entonces este método es para usted.

La mejor manera de añadir un vídeo de YouTube como fondo a pantalla completa es con Thrive Architect.

Thrive Architect es un plugin maquetador de páginas fácil de usar hecho pensando en los principiantes. Además de una característica de fondo de vídeo, tiene una funcionalidad de arrastrar y soltar que es flexible de usar, para que pueda crear el sitio web que desee sin ningún tipo de molestia.

Además, viene con plantillas de página de destino inteligentes que están optimizadas para las conversiones, por lo que su página de destino se establece para el éxito desde el primer momento.

Para más información acerca de Thrive Architect, puede leer nuestra reseña / valoración de Thrive Architect.

Si desea utilizar este método, seguir adelante y comprar un plan de Thrive Architect primero. Está disponible para su compra como producto independiente o como parte del lote Thrive Themes.

A continuación, sólo tiene que instalar el plugin. Puede marcar / comprobar nuestra guía sobre cómo instalar un plugin de WordPress para obtener más información.

Después de eso, puedes ir a ‘Páginas’ desde el área de administrador de WordPress y seleccionar una página para editar. Pasa el cursor sobre la página y selecciona ‘Editar con Thrive Architect’.

A continuación, haga clic en el botón “+” situado a la derecha de la página y busque el elemento Sección de fondo.

Basta con hacer clic en él para añadirlo a la página.

En este punto, puede navegar por la parte izquierda de la página y desplazarse hasta la sección Estilo de fondo.

Activa el conmutador “Fondo de vídeo” y selecciona “YouTube” como fuente.

Después, ve al vídeo de YouTube que quieras utilizar como fondo de pantalla completa.

Sólo tienes que copiar la URL del vídeo de YouTube así:

A continuación, pegue la URL en la sección correspondiente.

Ahora debería ver el fondo en la pantalla.

Aunque se añade el fondo, aún no está a pantalla completa.

Para asegurarte de que es pantalla completa, tienes que desplazarte hasta la sección de Opciones principales. A continuación, active las opciones “El contenido cubre todo el ancho de la pantalla”, “Ajustar la altura a la pantalla” y “Estirar para ajustar el ancho de la pantalla”.

Exploremos algunas opciones más. Para añadir contenido al fondo, sólo tienes que volver a hacer clic en el botón “+” de la derecha y arrastrar y soltar un elemento.

Puedes añadir textos, imágenes, formularios, botones, testimonios y mucho más. Thrive Architect tiene docenas de elementos centrados en la conversión que puedes aprovechar para tu sitio web.

Si cree que el color de fondo no contrasta lo suficientemente bien con el texto, simplemente vuelva a los ajustes de la sección Fondo.

A continuación, desplázate de nuevo a Estilo de fondo y, en la opción Añadir capa, elige un color sólido. Después, puedes elegir un color para utilizarlo como filtro de fondo y ajustar la opacidad a tu gusto.

Cuando hayas terminado, haz clic en “Aplicar”.

Otra cosa que puedes ajustar en los ajustes de la Sección en segundo plano es el Comportamiento del desplazamiento. Puedes elegir si quieres que sea estático, fijo o de paralaje.

Le recomendamos que lo mantenga estático para que el fondo no se mueva a medida que el usuario se desplaza hacia abajo. De lo contrario, el vídeo seguirá reproduciéndose, lo que puede ralentizar tu sitio web.

Lo siguiente que puedes hacer es ir a la sección Adaptable. Aquí puedes elegir si quieres que el fondo de vídeo aparezca en las versiones para móviles y tabletas de tu sitio web.

Tú decides, pero ten en cuenta que los vídeos tardan un poco en cargarse. Puede resultar molesto para tus visitantes esperar a que se ejecuten cuando están en un dispositivo de pantalla pequeña.

Cuando estés satisfecho con el fondo del vídeo de YouTube a pantalla completa, sólo tienes que hacer clic en el botón “Guardar trabajo” para guardar los cambios.

¡Eso es!

Ahora, vaya a su sitio web de WordPress para ver cómo se ve en vivo.

Este es el aspecto de nuestra página de prueba.

Alternativa: Añadir un fondo animado en WordPress

Aunque los fondos de vídeo pueden ser visualmente atractivos, también pueden ralentizar la velocidad de carga de su sitio web. Si quieres una opción alternativa, puedes añadir un fondo animado.

La mejor manera de hacerlo es con SeedProd, un potente plugin maquetador de arrastrar y soltar para WordPress.

Le permite añadir fácilmente impresionantes fondos animados a su sitio web utilizando particle.js. Particle.js es una biblioteca ligera de JavaScript que crea animaciones interactivas de partículas.

Para más información, puede comprobar nuestra guía sobre cómo añadir un fondo animado en WordPress.

Consejo extra: Añadir un feed de vídeos de YouTube en WordPress

¿Quieres añadir más vídeos a tu sitio web? Aunque WordPress incorpora bloques para incrustar vídeos, no son la forma más atractiva de mostrarlos, sobre todo si tienes varios.

Ahí es donde entra Smash Balloon YouTube Feed Pro.

Smash Balloon YouTube Feed Pro es el mejor plugin de galería de YouTube del mercado. Muestra automáticamente todos los últimos vídeos de su canal de YouTube, por lo que sus visitantes siempre verán el contenido más reciente.

Simplemente crea un feed de YouTube usando el sencillo editor de Smash Balloon, y luego añádelo a cualquier página o entrada usando el shortcode o el bloque ya preparado del plugin.

También puedes utilizar Smash Balloon para incrustar listas de reproducción, favoritos y transimisiones en directo de YouTube en tu sitio web WordPress.

Lo mejor de Smash Balloon es que no ralentiza tu sitio. La característica de caché de YouTube incorporada en el plugin se asegurará de que tu sitio siempre cargue rápido, lo que es genial para el SEO.

Para más detalles, puedes consultar nuestra guía paso a paso sobre cómo mostrar los últimos vídeos de un canal de YouTube en WordPress.

Esperamos que este tutorial te haya ayudado a aprender cómo añadir un vídeo de YouTube como fondo en WordPress. También puedes marcar / comprobar nuestra guía práctica sobre cómo crear una página de destino de lista de espera viral con WordPress y nuestra selección de los mejores maquetadores de temas para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.