Añadir videos de fondo

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

Utiliza videos de fondo para aplicar efectos visuales dinámicos a tu sitio. Por ejemplo, puedes agregar texto e imágenes para dar más dimensión y contenido dinámico a tus páginas. Estos videos se reproducen en bucle y no tienen sonido. 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.

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.
• Aunque los banners de video que utilizan nuestros consejos de diseño deben mostrarse en equipos de escritorio, es posible que el video no siempre aparezca en dispositivos móviles, dependiendo de la velocidad de conexión y de la versión del navegador de quien visita el sitio. Establece una imagen alternativa para dispositivos móviles para que aparezca si el banner de video 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 de reserva 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.

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

• Necesitas tener un plan Vimeo pagado para agregar un video de fondo de Vimeo.
• No es posible añadir videos HD de Vimeo a páginas de portada o banners.

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. Para obtener más información al respecto, 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	Agrega máximo dos videos de fondo por página. De esta forma, reducirás el tamaño de tu página, lo que dará lugar a tiempos de carga más rápidos.
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	Cambia el color de fuente. Por ejemplo, si el video es en su mayoría oscuro, elige un color de fuente más claro para el texto superpuesto. Cambia el brillo del video con filtros. 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 cargarlo, asegúrate de que el video cumpla con nuestros requisitos de carga. 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é establecida en Cualquiera y permite incrustar En cualquier lugar u Ocultar este video de Vimeo.com, así como incrustar Únicamente en los sitios que elijo.
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.

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

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 añadir un filtro, haz clic en el menú desplegable Filtro de la pestaña Video. Para todos los filtros, excepto invertir, puedes ajustar la intensidad con el control deslizante. Los efectos de los filtros pueden tener un renderizado diferente en cada uno de los navegadores.

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:

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.

Ver un video (versión 7.0)

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