Cómo agregar un video de YouTube como fondo de pantalla completa en WordPress

Los fondos de video a pantalla completa captan la atención al instante. Convierten un sitio simple de WordPress en algo que se siente pulido, moderno y diseñado profesionalmente.

En general, hemos visto cuánto puede mejorar las primeras impresiones y mantener a los visitantes interesados un fondo de video bien ubicado.

La buena noticia es que no necesitas software especial ni desarrollo personalizado. Incluso puedes usar videos de YouTube que ya tengas, lo que lo convierte en una forma asequible de agregar movimiento y personalidad a tus páginas.

En esta guía, te mostraremos las formas más fáciles de agregar un video de YouTube como fondo de tu WordPress utilizando herramientas amigables para principiantes.

¿Por qué usar un video de YouTube como fondo de pantalla completa?

Usar un video de YouTube como fondo de pantalla completa es una forma poderosa de captar la atención de los visitantes de inmediato y mantenerlos interesados en tu sitio.

Aquí están los beneficios:

• Mantén tiempos de carga de página rápidos: Incrustar un video de YouTube en lugar de subir tu propio video mantiene tu sitio ligero, lo cual es importante para la experiencia del usuario y el SEO.
• Atrae a los visitantes al instante: Un fondo de video en movimiento puede captar la atención en los primeros segundos de una visita.
• Destácate de la competencia: Crea una apariencia visualmente atractiva y moderna que distinga tu sitio.
• Ahorra ancho de banda y almacenamiento: Alojar videos en WordPress puede consumir muchos recursos del servidor y requerir almacenamiento adicional.

En WPBeginner, recomendamos encarecidamente incrustar videos de YouTube en lugar de subirlos directamente a WordPress. Este enfoque te permite mostrar contenido atractivo sin ralentizar tu sitio ni ejercer una presión innecesaria sobre tu plan de hosting.

Dicho esto, veamos cómo puedes agregar un video de YouTube como fondo de 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: Usa Advanced WordPress Backgrounds para Fondo de Video de Pantalla Completa (Gratis)
• Método 2: Usa Thrive Architect para Agregar un Fondo de Video de Pantalla Completa (Recomendado)
• Alternativa: Agrega un fondo animado en WordPress con SeedProd
• Preguntas frecuentes sobre fondos de video

Método 1: Usa Advanced WordPress Backgrounds para Fondo de Video de Pantalla Completa (Gratis)

Si buscas una forma gratuita y fácil de agregar fondos de video, entonces puedes usar Advanced WordPress Backgrounds.

Este plugin gratuito agrega un bloque de Fondo que te permite crear un fondo de pantalla completa usando cualquier color, imagen o video, incluidos los videos de YouTube.

Primero, deberás instalar y activar el plugin en tu panel 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 publicación donde deseas agregar un video de YouTube como fondo de pantalla completa. En el editor de bloques de Gutenberg, haz clic en el botón de agregar bloque ‘+’.

En la ventana emergente que aparece, comienza a escribir ‘Background AWB’. Cuando aparezca el bloque correcto, haz clic en él para agregarlo a la página.

En el menú del lado izquierdo, verás tres pestañas para los diferentes tipos de fondos de ancho completo que puedes crear: Color, Imagen y Video.

Dado que deseas agregar un video de YouTube, haz clic en la pestaña ‘Video’. Después de eso, elige la pestaña ‘YouTube / Vimeo‘. 

Ahora puedes copiar y pegar la URL del archivo de video de YouTube que deseas usar en tu 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 video según el contenido que agregues encima, así que no te preocupes si el video actualmente se ve un poco pequeño.

Por defecto, el fondo de video está deshabilitado en dispositivos móviles.

Sin embargo, si deseas mostrar el fondo de video en dispositivos móviles, haz clic para activar el interruptor ‘Habilitar en dispositivos móviles’.

Ten en cuenta que los fondos de video pueden agotar la batería y consumir datos para los usuarios móviles.

Por defecto, el bloque reproducirá el video completo de YouTube en reproducción automática y en bucle. 

Otra opción es reproducir una porción específica del video escribiendo los tiempos exactos (en segundos) en los cuadros de 'Hora de inicio' y 'Hora de finalización'.

También puedes evitar que el video se reproduzca en bucle desactivando el interruptor ‘Bucle’.

Por defecto, el video solo se reproducirá cuando el visitante pueda verlo en su navegador. Esto ayudará a mantener el rendimiento de tu sitio web, por lo que normalmente querrás dejar el interruptor ‘Reproducir siempre’ desactivado.

Cuando agregas el video por primera vez, se muestra al 100% de opacidad, por lo que es completamente visible. Siéntete libre de arrastrar el control deslizante de ‘Opacidad de imagen’ para hacer que el fondo del video de YouTube sea más sutil.  

Si experimentas con la opacidad, es posible que también quieras intentar agregar una superposición de color. 

Simplemente haz clic para expandir la sección ‘Color de superposición’ y luego usa la configuración para crear superposiciones de diferentes colores.

Siéntete libre de explorar otras configuraciones, como el efecto de paralaje y el espaciado, para que el fondo se vea exactamente como lo deseas.

Cuando estés satisfecho con la configuración del fondo de video de YouTube, es hora de empezar a agregar contenido como enlaces, textos e imágenes. 

Para empezar, haz clic en el ícono ‘+’ en el centro del bloque Fondo (AWB).

Esto abre una ventana emergente donde puedes elegir el bloque que deseas agregar. El plugin Advanced WordPress Backgrounds funciona con todos los bloques estándar de WordPress, por lo que puedes agregar cualquier contenido que desees.

Si agregas texto encima del bloque, solo asegúrate de cambiar el color del texto para que complemente bien con el fondo del video.

Cuando estés contento con cómo se ve, simplemente haz clic en el botón 'Actualizar' o 'Publicar' para que la página se publique. Ahora, si visitas tu sitio web de WordPress, verás el fondo de video en acción. 

Método 2: Usa Thrive Architect para Agregar un Fondo de Video de Pantalla Completa (Recomendado)

Si deseas personalizar completamente tu fondo de video o diseñar páginas completas fácilmente, este método es para ti.

Para esto, necesitarás Thrive Architect.

Después de pruebas exhaustivas, hemos descubierto que es un plugin constructor de páginas súper fácil de usar. Además de la función de fondo de video, tiene una funcionalidad de arrastrar y soltar que es flexible de usar, por lo que puedes crear el sitio web que deseas sin ningún problema.

Además, viene con plantillas de páginas de destino inteligentes que están optimizadas para conversiones, por lo que tu página de destino estará lista para el éxito desde el principio.

Para obtener más información sobre Thrive Architect, puedes leer nuestra reseña de Thrive Architect.

Si deseas usar este método, adelante y compra primero un plan de Thrive Architect. Está disponible para comprar como un producto independiente o como parte del paquete de Thrive Themes.

Luego, simplemente instala el plugin. Puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress para más información.

Después de eso, puedes ir a 'Páginas' desde el área de administración de WordPress y seleccionar una página para editar. Pasa el cursor sobre la página y elige 'Editar con Thrive Architect'.

A continuación, haz clic en el botón '+' en el lado derecho de la página y busca el elemento de Sección de Fondo.

Simplemente haz clic en él para agregarlo a la página.

En este punto, puedes navegar al lado izquierdo de la página y desplazarte hacia abajo hasta la sección Estilo de fondo.

Aquí, simplemente activa el interruptor de ‘Fondo de video’ y selecciona ‘YouTube’ como Fuente.

Después de eso, ve al video de YouTube que deseas usar como fondo de pantalla completa.

Simplemente copia la URL del video de YouTube así:

Luego, pega la URL en la sección apropiada.

Ahora deberías ver el fondo en la pantalla.

Si bien el fondo se agrega, aún no está en pantalla completa.

Para asegurarte de que esté en pantalla completa, necesitas desplazarte hacia arriba hasta la sección Opciones principales. Luego, habilita las opciones ‘El contenido cubre todo el ancho de la pantalla’, ‘Ajustar altura a la pantalla’ y ‘Estirar para ajustar el ancho de la pantalla’.

Exploremos algunas opciones más. Para agregar contenido a tu fondo, todo lo que necesitas hacer es hacer clic en el botón ‘+’ en el lado derecho nuevamente y arrastrar y soltar un elemento.

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

Si crees que el color de fondo no contrasta lo suficientemente bien con el texto, simplemente regresa a la configuración de la Sección de Fondo.

Luego, desplázate hacia abajo hasta Estilo de fondo nuevamente, y en la opción Agregar capa, elige un color sólido. Después de eso, puedes elegir un color para usar como filtro de fondo y ajustar la opacidad como desees.

Una vez que hayas terminado, simplemente haz clic en 'Aplicar'.

Otra cosa que puedes ajustar en la configuración de la Sección de Fondo es el Comportamiento de desplazamiento. Puedes elegir si hacerlo estático, fijo o parallax.

Recomendamos simplemente mantenerlo estático para que el fondo no se mueva mientras el usuario se desplaza hacia abajo. De lo contrario, el video seguirá reproduciéndose, lo que puede ralentizar tu sitio web.

Lo siguiente que puedes hacer es ir a la sección Responsivo. Aquí, puedes elegir si hacer que el fondo de video aparezca en las versiones móviles y de tableta de tu sitio web.

Depende de ti, pero ten en cuenta que los videos tardan un tiempo en cargarse. Puede ser molesto para tus visitantes esperar a que se ejecuten cuando están en un dispositivo de pantalla pequeña.

Una vez que estés satisfecho con el fondo de video de YouTube a pantalla completa, simplemente haz clic en el botón 'Guardar trabajo' para guardar tus cambios.

¡Eso es todo!

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

Así es como se ve nuestra página de prueba.

Alternativa: Agrega un fondo animado en WordPress con SeedProd

Si bien los fondos de video pueden ser visualmente atractivos, también pueden ralentizar la velocidad de carga de tu sitio web. Si deseas una alternativa, puedes agregar un fondo animado en su lugar.

La mejor manera de hacer esto es con SeedProd, un potente plugin constructor de páginas de arrastrar y soltar para WordPress.

Te permite agregar fácilmente impresionantes fondos animados a tu sitio web usando particle.js. Particle.js es una biblioteca ligera de JavaScript que crea animaciones interactivas de partículas.

Para obtener más información, puedes consultar nuestra guía sobre cómo agregar un fondo animado en WordPress.

Consejo adicional: Agrega un feed de video de YouTube en WordPress 

¿Quieres agregar más videos a tu sitio web? Si bien WordPress tiene bloques integrados para incrustar videos, no son la forma más atractiva visualmente de mostrar videos, especialmente si tienes varios.

Ahí es donde entra Smash Balloon YouTube Feed Pro. 

En nuestra opinión, es el mejor plugin de galería de YouTube del mercado que muestra automáticamente todos los últimos videos de tu canal de YouTube, por lo que tus visitantes siempre verán el contenido más reciente.

Simplemente crea un feed de YouTube usando el editor fácil de Smash Balloon, y luego agrégalo a cualquier página o publicación usando un shortcode o el bloque listo para usar del plugin.

También puedes usar Smash Balloon para incrustar listas de reproducción de YouTube, favoritos y transmisiones en vivo en tu sitio web de WordPress.

Lo mejor de Smash Balloon es que no ralentiza tu sitio. La función de caché de YouTube integrada del plugin se asegurará de que tu sitio siempre cargue rápido, lo cual es excelente para el SEO.

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

Preguntas frecuentes sobre fondos de video

Aquí hay algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo agregar fondos de video en WordPress:

¿Cómo pongo un video de YouTube en pantalla completa?

Para poner un video de YouTube en pantalla completa, haz clic en el ícono de pantalla completa en la parte inferior derecha del reproductor de YouTube, o usa el atajo de teclado f mientras el video está activo.

¿Cómo se agrega un fondo de video en WordPress?

Puedes agregar un fondo de video a través de un plugin o un constructor de páginas como Thrive Architect. Para videos de YouTube, se recomienda incrustar para evitar ralentizar tu sitio.

¿Qué tipo de videos de YouTube debería elegir como fondo?

Recomendamos elegir un video visualmente atractivo que sea lo suficientemente sutil como para no distraer del contenido principal. Los clips cortos en bucle con movimiento suave a menudo funcionan mejor.

Esperamos que este tutorial te haya ayudado a aprender cómo agregar un video de YouTube como fondo en WordPress. También puedes consultar nuestra guía sobre cómo crear una página de destino viral de lista de espera con WordPress y nuestras selecciones expertas para los mejores constructores de temas de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.