Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿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.

How to add YouTube video as fullscreen background in 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.

How to add a fullscreen video to a WordPress blog post or page

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.

Getting the URL for a YouTube video

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.

How to customize a YouTube background video in WordPress

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”.

Showing a YouTube background on mobile devices

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”.

How to add a YouTube background video to a website

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.

Changing the opacity settings for a YouTube video

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.

Adding an overlay to a video background

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).

Adding blocks to a YouTube background video

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.

An example of a YouTube video background in WordPress

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.

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’.

Clicking Edit with Thrive Architect on a page

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.

Adding a Background section in Thrive Architect

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.

Selecting a video background style in Thrive Architect

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í:

Getting the URL for a YouTube video

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

Ahora debería ver el fondo en la pantalla.

Pasting video background URL in Thrive Architect

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”.

Adjusting the video background height and width in Thrive Architect

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”.

Changing the color overlay opacity in Thrive Architect

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.

Adjusting the scroll behavior of the video background in Thrive Architect

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.

Adjusting the responsiveness behavior of the video background in Thrive Architect

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.

Video background example made with Thrive Architect

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.

The particle background's advanced settings in SeedProd

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.

Embedding a YouTube playlist using Smash Balloon

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.

Creating a YouTube feed using the Smash Balloon social media plugin

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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

14 comentariosDeja una respuesta

  1. 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!

  2. 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.

  3. 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?

  4. 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.

  5. 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.

  6. 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?

  7. 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

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.