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

Para dar efectos visuales dinámicos a tu sitio, usa videos de fondo que se reproducen en bucle. Por ejemplo, puedes agregar texto e imágenes sobre videos de fondo para aportar más dimensión y contenido dinámico a tus páginas. En el caso de los videos de fondo, puedes:

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

Antes de comenzar

Consejos generales

  • 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.
  • 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.
  • Sigue nuestros consejos de accesibilidad de videos para garantizar una experiencia de visualización de calidad a tus visitantes.
  • No hay límite de tiempo para los videos de terceros insertados. Al cargar un video de fondo, la duración máxima es de 60 segundos. Los videos más cortos pueden mostrar el color de fondo con más frecuencia al hacer un bucle.
  • 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.
  • 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 captar interés visual por tu sitio, pero no deberían ser una distracción con respecto al demás contenido del sitio. Estas son algunas de las prácticas recomendadas para que tus videos de fondo se vean grandiosos.

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.
  • Utiliza una resolución de 1080p y una velocidad de bits de al menos 3 Mbps.
  • Una duración de video ideal es inferior a 40 segundos.
  • 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 - Encuentra la URL de tu video

Para añadir un video de fondo, cárgalo a YouTube o a Vimeo y encuentra la URL para compartirlo. No es posible subir un video directamente a Squarespace ni integrar videos alojados en otros servicios.

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.

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 blogs, eventos y tiendas. 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, a continuación, en el ícono +. Selecciona Cargar archivo para agregar un video desde tu dispositivo o haz clic en Agregar desde enlace para añadir una URL de Vimeo o YouTube. Después, haz clic en Guardar.
  5. Desplázate para personalizar otras configuraciones del video.
  6. Posiciona el cursor sobre Listo y haz clic en Guardar.

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.

Deshabilitar el video de fondo

Para desactivar el video de fondo, cámbialo por una imagen de fondo. La imagen establecida reemplazará al 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.
  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: 202 de 459
Añadir videos de fondo