Añadir videos de fondo

Agrega efectos visuales interesantes con videos que se reproducen automáticamente detrás del contenido de tu sitio web.

Última actualización: 16 de enero de 2025

Una forma de darle estilo al fondo de tu sitio es usar videos para obtener un efecto visual dinámico. Por ejemplo, puedes agregar texto e imágenes sobre videos de fondo para agregar más dimensión y contenido dinámico a tus páginas. Estos videos se reproducen en bucle y son silenciosos. Para los videos de fondo puedes:

  • Utiliza videos de YouTube y Vimeo en secciones de páginas, banners y otras áreas, según la versión de tu sitio.
  • Sube tus videos a los fondos de sección en la versión 7.1.

Para un aspecto personalizado, también puedes aplicar filtros estilizados y colores de superposición.

Obtén información sobre todas tus opciones de estilo de fondo en Diseñar el fondo de tu sitio.

Consejo

También puedes agregar fondos animados con efectos de imagen y fondos personalizados únicos. Para obtener más información, consulta Imágenes de fondo de sección y Fondos personalizados de sección.

Mira el video

Antes de comenzar

Consejos generales

  • El servicio de alojamiento de videos es responsable de la calidad y resolución de los videos en streaming. La calidad de la transmisión está fuera del control de Squarespace. Si los videos aparecen en baja calidad, asegúrate de seguir nuestros consejos de diseño.
  • Los videos subidos a Squarespace pueden mostrarse a 1080p o 360p dependiendo del dispositivo, navegador y conexión a Internet. No hay forma de seleccionar manualmente qué resolución se muestra.
  • Si bien los videos de fondo que siguen nuestros consejos de diseño deben mostrarse en equipos de escritorio, es posible que los videos no siempre se muestren en dispositivos móviles, dependiendo de la velocidad de conexión del visitante y la versión del navegador. Configura una imagen alternativa para dispositivos móviles para que aparezca si el video de fondo no se puede cargar.
  • El fondo de la página o el color de superposición del banner se muestra mientras el video se almacena en el búfer. Si el video tarda unos segundos en cargarse, es posible que se muestre la imagen alternativa para dispositivos móviles. El tiempo de carga depende de tu conexión a internet.
  • Si bien los videos de fondo admiten URL de YouTube y Vimeo, no admiten agregar código de inserción.
  • Los dispositivos en modo de bajo consumo o ahorro de energía no mostrarán videos de fondo. Si agregas una imagen alternativa para dispositivos móviles, se mostrará la imagen alternativa. Si no agregas una imagen alternativa, en su lugar se mostrará una miniatura del video y un botón de reproducción que no responde.

YouTube

  • Deshabilita los anuncios superpuestos; de lo contrario, aparecerán sobre el video de fondo.
  • Es posible que tus visitantes vean brevemente un logotipo de YouTube, el título del video, o un ícono de reloj o de compartir cuando se cargue el video. Esto depende del diseño y el dispositivo.
  • Los anuncios en video que se reproducen antes del video, también conocidos como cuñas publicitarias previas, no se reproducirán cuando se trate de videos de fondo.

Vimeo

Consejos de diseño

Los videos de fondo son una excelente manera de añadir interés visual a tu sitio, pero no deberían distraer la atención del resto del contenido de tu sitio. Estas son algunas prácticas recomendadas para ayudar a que tu video de fondo se vea perfecto. Si quieres usar un video de fondo, consulta nuestros requisitos de video.

Cuando estés considerando qué videos usar en el fondo, sigue estos consejos:

Consejo Notas
El archivo de video debe ser pequeño

Para los videos insertados, no hay límite de duración. Para los videos cargados, el límite es de 60 segundos. La duración y la resolución tienen en cuenta el tamaño del archivo de video.

Los videos más grandes necesitan más tiempo para cargar y pueden pausarse a la mitad, según la conexión de quien visite el sitio. Ten en cuenta lo siguiente:

  • Una velocidad de fotogramas ideal es de unos 60 fotogramas por segundo, especialmente si el video se muestra en cámara lenta.
  • Si el video se ve borroso en dispositivos móviles, intenta aumentar la velocidad de fotogramas a más de 60 fotogramas por segundo y, a continuación, vuelve a subir el video.
  • Mantén la duración del video en menos de 40 segundos.
  • Los videos más cortos pueden mostrar el color de fondo con más frecuencia cuando se realizan bucles.
  • Utiliza una resolución de 1080p y una velocidad de bits de al menos 3 Mbps.
  • Al grabar videos, limita el movimiento de la toma o de los objetos de la toma. Al tener menos movimiento, el fondo de los videos tiene un aspecto más uniforme.
Usar una relación de aspecto amplia
  • Los fondos de sección cambian de tamaño automáticamente según el contenido y el tamaño de la ventana del navegador del visitante.
  • Para minimizar el recorte, usa videos con una relación de aspecto horizontal, como 16:9.
  • Intenta encontrar o grabar videos cuyo tema esté centrado y tengan espacio alrededor para que puedan recortarse de manera segura.
Límite del número de videos de fondo por página
Elige videos con transiciones fluidas
  • Para mantener los videos accesibles, evita el contenido que parpadea tres o más veces en un segundo periodo.
  • Considera las transiciones y evita cortes rápidos o una panorámica excesiva. Los videos que parecen saltar molestan a los visitantes.
Contraste con texto Para obtener más información sobre el contraste de color, consulta Cómo hacer que tu sitio de Squarespace sea más accesible.

Paso 1: Preparar el archivo de video o URL

Para agregar un video de fondo, puedes cargar tu archivo a un fondo de sección en la versión 7.1. También puedes subir tu video a YouTube o Vimeo y buscar su URL para compartir.

Nota

asegúrate de que la URL no incluya una marca de tiempo para una sección específica del video, ya que esto evitará que se cargue.

Cargar tu video

Para preparar el archivo de video para subirlo, asegúrate de que cumpla con nuestros requisitos de video. Ten en cuenta que el límite de duración de los videos de fondo cargados es de 60 segundos.

YouTube

  1. Crea o inicia sesión en una cuenta de YouTube.
  2. Carga un video o encuentra uno que ya hayas subido.
  3. Asegúrate de que el video está configurado en Sin listar o Público y permite incrustarlo.
  4. Copia la URL para compartir el video

Vimeo

  1. Crea o inicia sesión en una cuenta de Vimeo.
  2. Carga un video o encuentra uno que ya hayas subido.
  3. Asegúrate de que la configuración de privacidad del video esté configurada como Pública u Ocultar de Vimeo. Permitir incrustar en cualquier lugar o en dominios específicos. Si eliges permitir la incrustación solo en dominios específicos, asegúrate de agregar el dominio de tu sitio web en el campo de texto que aparece.
  4. Copia la URL para compartir el video

Paso 2: Agrega el video

Los pasos para agregar un video dependen de la versión de tu sitio y de dónde vas a añadirlo.

Consejo

Hasta que añadas tu URL, verás un video breve del océano como marcador de posición de muestra.

Fondos de las secciones

Puedes agregar videos de fondo a cualquier sección, excepto a las secciones de blog, eventos, galería y tienda. Asegúrate de que el video cumpla con nuestros requisitos. Para agregar un video de fondo:

  1. Abre el panel de Páginas y haz clic en la página que tenga la sección que quieres editar.
  2. En la esquina superior izquierda, haz clic en Editar.
  3. Haz clic en el ícono de lápiz de la sección y, a continuación, en Fondo.
  4. Haz clic en Video y, luego, en el icono +. Elige una fuente de video en el menú desplegable. Para ver los pasos detallados, visita la sección a continuación.
  5. Desplázate para personalizar otras configuraciones del video.
  6. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.

Cómo elegir un video

Después de hacer clic en el ícono +, elige cómo agregar el video:

Cabecera de página

En algunas plantillas, puedes agregar un fondo de video a un banner de página web. Esto crea un gran efecto visual cuando se combina con superposiciones de texto.

  1. Abre el panel Páginas.
  2. Desplaza el cursor sobre el título de la página en el panel izquierdo y, a continuación, haz clic en “the.
  3. Haz clic en la pestaña Medios .
  4. En la pestaña Medios, haz clic en la pestaña Video.
  5. Pega la URL de tu video en el campo URL del video .

Plantillas admitidas

Puedes añadir videos de banners en los tipos de página enumerados de estas familias de plantillas:

  • Adirondack: Diseño, Producto, Álbum, Eventos, Blog
  • Bedford: Diseño, Producto, Álbum, Eventos, Blog
  • Brine: Diseño, Álbum, Eventos, Blog
  • Five: Diseño, Álbum, Eventos, Blog
  • Montauk: diseño, eventos, blog, índice (debe tener una imagen alternativa para dispositivos móviles)
  • Pacific: Diseño, Producto, Álbum, Eventos, Blog
  • Tremont: Diseño, Producto, Álbum, Eventos, Blog
  • York: Diseño, Productos, Álbum, Eventos, Blog, Proyecto, Índice

Banners de video en las páginas de un Índice

Puedes agregar banners en video a las páginas dentro de las páginas de índice en estas familias de plantillas:

  • Bedford
  • Brine
  • Montauk
  • Pacific
  • York

Para añadir el video:

  1. Abre las configuraciones de la subpágina
  2. Presiona Medios y, a continuación, Video.
  3. Sigue los pasos anteriores para agregar la URL del video.

Fondo de página de portada

Para agregar el video a una página de portada:

  1. Abre una página de portada o agrega una nueva.
  2. Haz clic en Medios.
  3. En el panel Media (Medios), haz clic en la pestaña Video .
  4. Pega la URL para compartir tu video en el campo URL del video.

Diseños disponibles

En la mayoría de los diseños de página de portada, los videos se reproducen como fondo sin bordes detrás del contenido de la página de portada, lo que amplía los bordes del navegador.

pero hay algunas excepciones:

  • Aparece en el panel lateral: Backstory, Flash, Spotlight, Session, Vignette
  • Aparece en el área circular del retrato: Focus, Monocle
  • No acepta videos: Flagship, Harbor

Pantalla de bloqueo

Puedes agregar un video de fondo a la pantalla de bloqueo en lugar de una imagen o de diapositivas. Todos los sitios admiten pantallas de bloqueo.

Para añadir un video a una pantalla de bloqueo:

  1. Abre el panel de Pantalla de bloqueo.
  2. Haz clic en Lock Screen (Pantalla de Bloqueo).
  3. Haz clic en Medios.
  4. Haz clic en la pestaña Video.
  5. Pega la URL de tu video en el campo URL del video .

Paso 3: Selecciona un ancho de fondo

Los videos de fondo pueden aparecer sin bordes o en un recuadro desde los bordes de la sección.

  • La imagen sin bordes extiende la imagen de un borde de la ventana del navegador a otro, abarcando el ancho del sitio.
  • El recuadro aplica una ligera sangría a la imagen y crea un borde alrededor de ella.

Cuando la imagen se establece en Recuadro, puedes definir el color del borde.

Paso 4: Agrega un filtro

Filtra el aspecto del video para que luzca estilizado. Los filtros también afectan la imagen alternativa de móvil de video. El efecto de un filtro depende del color y la imagen del video, por lo que te recomendamos que experimentes hasta encontrar el efecto adecuado.

Para agregar un filtro, haz clic en el menú desplegable Filtros en la pestaña de Videos. Para todos los filtros excepto Invertir, puedes ajustar la intensidad con el control deslizante. Los efectos de los filtros pueden tener renderizados diferentes en los distintos navegadores.

Puedes usar el filtro de Opacidad para agregar un color de superposición. Haz clic en la pestaña Colores para seleccionar una combinación de colores para la superposición y cualquier contenido agregado. Para obtener más información, visita Cómo cambiar los colores. Si eliminas el video, la superposición se convierte en el color de fondo de la sección.

Paso 5: Cambia la velocidad de reproducción

Si utilizas un enlace URL de YouTube o Vimeo, puedes cambiar la configuración en Velocidad de reproducción para aumentar o disminuir la velocidad del video. La velocidad predeterminada es 1x, lo que significa que el video se reproduce a su ritmo normal.

Paso 6: Agrega una imagen alternativa para dispositivos móviles

Los navegadores móviles son compatibles con los videos de fondo, pero, dependiendo de la velocidad de conexión y la versión del navegador, es posible que los videos de los banners no se carguen para todos los que visitan el sitio. Puedes configurar que aparezca una imagen de reserva para dispositivos móviles cuando el video del banner no se pueda cargar. Los filtros también aplican a la imagen de reserva para dispositivos móviles. Para obtener mejores resultados, ajusta el formato de la imagen para la web antes de subirla.

La forma en que agregues una imagen de reserva para dispositivos móviles depende de la versión del sitio. Para agregar dicha imagen:

  1. Haz clic en Editar en la página y, a continuación, en el ícono de lápiz en la sección con el fondo del video.
  2. Presiona Fondo y, a continuación, Video.
  3. En Imagen alternativa para dispositivos móviles, haz clic en Agregar una imagen para cargar una imagen o en Buscar imágenes para volver a utilizar una imagen o agregar una imagen de stock
  4. Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.

La imagen de reserva para dispositivos móviles también se muestra mientras se carga el video.

Si no añades una imagen alternativa para dispositivos móviles, se mostrará un color de fondo en los dispositivos móviles. Este color se establece con los colores de la sección.

  1. En la pestaña Video del panel Medios, desplázate hacia abajo hasta Imagen de reserva para dispositivos móviles.
  2. Haz clic en Cargar una imageno en Buscar imagen paravolver a utilizar una imagen o agregar una imagen en stock.
  3. Haz clic en Guardar.

Si no añades una imagen alternativa para dispositivos móviles, se mostrará un color de fondo en los dispositivos móviles. Puedes elegir el color en estas familias de plantillas:

  • Adirondack: Ajuste Color del fondo del contenido
  • Bedford: ajuste Color de la superposición del banner
  • Brine: ajuste Color de superposición
  • Five Ajustes Color de la superposición del banner y Fondo del encabezado
  • Montauk: Ajuste Fondo del lienzo
  • Pacific: ajuste Color de la superposición
  • Tremont: Ajuste Color del fondo del sitio
  • York: ajuste Color del fondo

Para páginas de Portada, utiliza el ajuste Fondo: Color.

Consejo

Agrega un .gif animado como imagen de reserva para dispositivos móviles para crear un efecto similar al video.

Desactivar o eliminar el video de fondo

Para eliminar un video de fondo, puedes desactivarlo o borrarlo. Para desactivarlo, cambia a una imagen de fondo. De esta forma, la imagen que selecciones reemplaza al video de fondo. Solo es posible borrar videos de fondo en los sitios de la versión 7.1. Si borras un video, se libera espacio de almacenamiento de videos en tu sitio.

Para desactivar el video de fondo:

  1. Haz clic en Editar en la página y, a continuación, en el ícono de lápiz en la sección con el video.
  2. Haz clic en Fondo y, a continuación, en Imagen.
  3. Haz clic en Guardar.

Cada sitio tiene 30 minutos de almacenamiento de video. Si alcanzas este límite, puedes eliminar videos para liberar espacio . Para obtener más información, visita Administrar y reutilizar imágenes y videos.

  1. En el panel Páginas, desplaza el cursor sobre el título de la página en el panel izquierdo y haz clic en “the.
  2. Haz clic en Medios y, a continuación, en Imagen.
  3. Haz clic en Guardar.

Si estás utilizando una Página de Portada, también puedes elegir Ninguna para reemplazar el video con un color de fondo.

Ver un video (versión 7.0)

Este video corresponde a la versión 7.0 de Squarespace.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.