Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Añadir videos de fondo

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:

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. Para obtener más información, consulta Animaciones y efectos de imagen.

Antes de comenzar

Consejos generales

  • El servicio de alojamiento de vídeo es responsable de la calidad y resolución de los vídeos transmitidos. La calidad de la transmisión está fuera del control de Squarespace. Si tus vídeos se ven con baja calidad, asegúrate de seguir nuestros consejos de diseño. Ponte en contacto con el servicio de alojamiento de vídeo si la calidad no mejora.
  • 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

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:

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

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.

Fondos de las secciones

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

  1. En el menú de Inicio, haz clic en Páginas y, a continuación, en la página con 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. Posiciona el cursor sobre Listo y haz clic en Guardar.

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. En el Menú de Inicio, haz clic en 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 de reserva 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 anuncios 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. En el Menú de Inicio, haz clic en Diseño.
  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 - 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 4: Cambiar 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 5 - Agrega una imagen alternativa para 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. Posiciona el cursor sobre Listo y haz clic en Guardar.

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

Si no añades una imagen de reserva 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 de reserva 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 eliminarlo. Para desactivarlo, cambia a una imagen de fondo. De esta forma, la imagen ajustada reemplaza al video de fondo. Solo es posible eliminar videos de fondo en los sitios de la versión 7.1. Si lo haces, se libera espacio de almacenamiento 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. No es posible eliminar más de un video a la vez.

Para eliminar un video de fondo de sección:

  1. En el editor de secciones, haz clic en Fondo.
  2. Haz clic en Video y, luego, en el icono +.
  3. Haz clic en Seleccionar de la biblioteca.
  4. Verifica el video que deseas eliminar y, luego, haz clic en Eliminar.
  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.

Mira el video

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

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 211 de 479