¿Quieres añadir un vídeo de YouTube como fondo a pantalla completa en WordPress?
Si se utilizan correctamente, los vídeos de fondo pueden captar instantáneamente la atención del visitante y mantenerlo en su sitio web. Por eso, los vídeos son una buena opción para las páginas de destino y de oferta.
En este artículo, te mostraremos cómo añadir un vídeo de YouTube como fondo a pantalla completa en tu sitio web WordPress.
¿Por qué utilizar un vídeo de YouTube como fondo de pantalla?
Un vídeo de fondo atractivo y llamativo es una forma estupenda de mantener a los visitantes en tu sitio. Cuando los visitantes aterrizan por primera vez en tu sitio web de WordPress, solo tienes unos segundos para captar su atención y conseguir que se queden.
En la actualidad, muchos temas de WordPress son compatibles con fondos de vídeo. Sin embargo, subir y alojar un 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 diferenciarte de tus competidores sin ralentizar tu sitio web.
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 un vídeo de YouTube como fondo de pantalla completa, 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. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado, sólo tienes que ir a la página o entrada en la que quieras añadir un vídeo de YouTube como fondo a pantalla completa. A continuación, puede seguir adelante y hacer clic en el botón ‘+’ añadir bloque.
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 a pantalla completa 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 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 entrada, el bloque reproducirá todo el vídeo de YouTube 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.
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.
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 sobre cómo mostrar los últimos vídeos de un canal de YouTube en WordPress.
Esperamos que este artículo 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 con WordPress y nuestras selecciones de expertos sobre los mejores plugins de galerías de vídeos de YouTube.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Moinuddin Waheed says
This is very simple yet powerful idea to grab the visitors attention by playing something in the background.
I have used it with page builders and never knew that simple method directly from Gutenberg is also available to use.
it is specially helpful for landing and sales pages which makes intuitive on visitors part to engage with call to action button.
Thank for illustrating the simple steps.
THANKGOD JONATHAN says
I have an uploaded video on my WordPress library and I have been thinking of making it like a background video on my blog.
Please how do I do it properler so that it does not affect my website speed? Or must I upload it on youtube and then embed it on my site?
WPBeginner Support says
We do not recommend uploading videos directly to your WordPress site, you can see our reasons in our guide below!
https://www.wpbeginner.com/beginners-guide/why-you-should-never-upload-a-video-to-wordpress/
Administrador
Ralph says
I want to use it as a background for my portfolio/business contact page, but does it slow down the website itself, or does it load it straight from YouTube and doesn’t slow down the website itself?
Previous comments are old but still concerning.
WPBeginner Support says
The videos should load as an embed from YouTube which shouldn’t cause a slowdown on your site.
Administrador
Jiří Vaněk says
I shouldn’t worry about the slowdown of the website itself. The issue here lies mainly in slow connectivity and data on these devices. The first problem arises with mobiles that don’t have strong connectivity. It will lag, appear unprofessional, and perhaps lead the user to leave. The second issue is that if someone has a limited data plan, they’ll complain about how much data such a page consumes. Personally, I’d probably avoid this.
Jiří Vaněk says
I can learn something new again with Gutenberg. I’ve always known how to do this only in Elementor, where adding a video background is really simple. Now I know how to do it outside of Elementor as well.
WPBeginner Support says
Glad we could share the process
Administrador
T_Lind says
Great article!
But I cannot add the video background to a single page, like you describe. I’m only able to add a youtube video to my homepage, which limits the extend to which the app can be used.
Ideas?
Tobi says
Hi, this plugin was a disaster to my website.
It consumed all the resources and for hours I was on the phone with my hosting company trying to battle why I was getting the errors on this screenshots below:
After hours, we finally traced them to the plugin i recently installed.
We had to remove it from the file manager and everything is back to normal now.
It takes up a lot of resources unless you have a super hosting account, i don’t advise.
WPBeginner Support says
Hi Tobi,
The plugin shouldn’t consume too many resources because it loads video from YouTube not from your website. The first screenshot you shared points to a database connection error. We hope everything works fine for you now, however, if you still see issues on your website then it is most likely a hosting issue.
Administrador
Mike says
Does it work with Avada?
Carlos Leon says
Does it play on mobile phones?