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

Puedes incrustar videos de fondo de YouTube y Vimeo en secciones de páginas, banners y otras áreas, dependiendo de la versión de tu sitio. Los videos de fondo se reproducen en un loop sin sonido y aportan un efecto visual dinámico a tu sitio. Para un aspecto personalizado, 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.
  • A veces, los banners de video no se muestran en dispositivos móviles, ya que depende de la velocidad de conexión y de la versión del navegador. Configura para que aparezca una imagen de reserva para dispositivos móviles cuando el banner de video no se pueda cargar.
  • No existe límite de tiempo para los videos, aunque aquellos más cortos podrían dejar ver el color de fondo con más frecuencia al repetirse.
  • Los videos de fondo no admiten el código integrado.

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 gran manera de añadir interés visual a tu sitio, pero no deberían distraerte del resto del contenido del sitio. Aquí tienes algunas de las mejores prácticas para ayudarte a que tu video de fondo luzca fantástico.

El archivo de video debe ser pequeño

La duración y la resolución del video contribuyen al tamaño de archivo del video. Los videos más grandes necesitan más tiempo para cargar y pueden pausarse a la mitad, según la conexión del visitante.

Si bien no hay un límite de tiempo oficial, te recomendamos que la duración de los videos de fondo no supere los 40 segundos, si fuera posible. Una forma de mantener los videos cortos es elegir contenido que se reinicie sin interrupciones, lo que hace que el video parezca más largo, pero necesita menos espacio.

Te recomendamos usar videos con:  

  • Una velocidad de fotograma de unos 25 cuadros por segundo.
  • Una resolución de 720p, que corresponde a 1280x720 píxeles.

Elige contenido con transiciones fluidas

Cuando elijas un video, presta atención a las transiciones para evitar los cortes rápidos y un uso excesivo de la panorámica. Los videos que parecen que saltan de un lado a otro llaman la atención, pero pueden lucir discordantes.

Garantiza un contraste con el texto

Tu video de fondo debe ser compatible con el estilo de tu sitio, especialmente con el color de cualquier texto que coloques encima. Asegúrate de que los visitantes puedan leer tu texto en todo momento del video.

Si no hay contraste suficiente, puedes:

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 el video dependen de la versión de tu sitio y a dónde vas a agregarlo.

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ú Principal, haz clic en Páginas.
  2. Haz clic en la página en la que deseas agregar el video y, a continuación, en Editar.
  3. Desplaza el cursor sobre la sección y haz clic en el ícono de lápiz.
  4. Presiona Fondo y, a continuación, Video.
  5. Pega la URL del video en el campo Video.
  6. Desplázate para personalizar otras configuraciones del video.
  7. 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ú Principal, 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 disponibles

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 (debes 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 la Página de Portada

Para añadir un 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 una diapositiva. Todos los sitios admiten pantallas de bloqueo.

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

  1. En el Home Menu (Menú Principal), haz clic en Design (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 Video URL (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 - Cambia la velocidad de reproducción (solo en YouTube)

Si estás utilizando una URL de video de YouTube, puedes seleccionar una Playback Speed (Velocidad de reproducción) y modificar la velocidad de tu video. La velocidad por defecto es 1x, es decir que el video se reproducirá al 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 visitantes. 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 de reserva 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 en 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 agregas una imagen de reserva para dispositivos móviles, se mostrará un color de fondo en el dispositivo móvil. 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 la 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 retoque Fondo: Color.

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

Desactivar 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 Mediosy, 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: 166 de 332
Añadir videos de fondo