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 insertar videos de fondo de YouTube y Vimeo en las Páginas de Portada y en los banners de página de algunas plantillas. Los videos de fondo se reproducen constantemente sin sonido y añaden un efecto visual dinámico a tu sitio.

Puedes utilizar videos de Vimeo y YouTube como videos de fondo si pegas el enlace para compartir. Para lograr un aspecto y sensación personalizados, puedes aplicar filtros de estilo y colores superpuestos.

Mira el video

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

Antes de comenzar

Consejos generales

  • Se mostrará el color de fondo de página o de la cabecera mientras se carga el video. Si la carga del video toma algunos segundos, es posible que se muestre la imagen alternativa para 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, dependiendo de la velocidad de conexión del visitante y de la versión del navegador. Configura 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 soportan el código integrado.

YouTube

  • Configura el video como Público/Oculto y habilita la incrustación. Los videos privados de YouTube no se reproducirán como videos de fondo.
  • Deshabilita los anuncios superpuestos. Si tu video tiene habilitados los anuncios superpuestos, estos se mostrarán sobre el video de fondo.
  • Según el diseño que elijas y el dispositivo que usen los que visitan el sitio, podrían ver brevemente un logo de YouTube en la esquina inferior derecha del video. Puedes hacer que sea más sutil si aplicas el filtro de Difuminado a tu video.
  • 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

  • Debes tener una cuenta de Vimeo Plus o superior para agregar un video de fondo de Vimeo.
  • Editar tu configuración de privacidad de Vimeo para asegurarte de que puedes insertar videos. Configura el video como Cualquiera persona y permite que sea insertado en cualquier lugar. Los videos privados de Vimeo no se reproducirán como videos de fondo.
  • También puedes configurar el video usando la opción Ocultar este video de Vimeo.com y permitir insertarlo usando Solo en los sitios que yo elija.

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.

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 como Oculto/Público y de que admita incrustación.
  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 el video esté configurado como Cualquier persona y de que admita incrustación.
  4. Copia la URL para compartir el video

Paso 2 - Agrega el video

Los pasos para añadir un video son diferentes para los banners de las páginas del sitio web y para las Páginas de Portada. Sigue los pasos a continuación según el lugar en el que añadas el video.

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

Cabecera de página

En algunas plantillas, puedes añadir un video de fondo al banner de una página web, en lugar de tener una imagen estática de banner. Esto crea un efecto visual genial si lo combinas con superposiciones de texto.

La forma de añadir videos al banner de tu página depende de la versión de Squarespace en la que está tu sitio.

  1. En el Menú Principal, haz clic en Páginas.
  2. Posiciona el cursor sobre el título de la página en el panel izquierdo y haz clic en el [icono del engranaje].
  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 .
  6. Haz clic en Guardar.
  1. En el Menú Principal, haz clic en Páginas.
  2. Haz clic en la página en la que te gustaría añadir un banner y, a continuación, en Editar.
  3. Añade una sección de bloques y presiona su icono del 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. Haz clic en Guardar.

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. 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, producto, álbum, eventos, blog, proyecto, índice
  • Versión 7.1: Secciones de bloques en todas las páginas.

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 existente o añade una nueva:
  • Para sitios con una Página de Portada: en el Menú Principal, haz clic en Medios.
  • Para las Páginas de Portada agregadas a sitios web o tiendas: en el Menú Principal, haz clic en Páginas.
  • Haz clic en Medios.
  • En el panel Media (Medios), haz clic en la pestaña Video .
  • 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.

    Hay algunas excepciones. Estas disposiciones presentan los videos de manera diferente:

    • 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 añadir un video de fondo a tu pantalla de bloqueo en lugar de una imagen o una presentación de diapositivas. Todas las plantillas soportan 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 dentro de la pestaña Video y elige entre:

    • Difuminar
    • Brillo
    • Contraste
    • Invertir
    • Opacidad
    • Saturar
    • Sepia

    Para todos los filtros excepto Invertir, puedes ajustar la intensidad con la barra desplazadora.

    Nota: Los efectos de filtro podrían tener diferentes resultados en distintos 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. Puedes elegir entre cuatro velocidades diferentes:

    • 0.5x (lenta)
    • 1x (normal)
    • 1.5x (rápido)
    • 2x (más rápido)

    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 de añadir una imagen de reserva para dispositivos móviles depende de la versión de Squarespace en la que esté tu sitio.

    1. En el panel Media (Medios), haz clic en la pestaña Video .
    2. Desplázate hacia abajo y arrastra la imagen al cargador de imágenes. También puedes usar una imagen de stock.
    3. Haz clic en Guardar.
    1. En la sección que estás editando, presiona el icono del lápiz
    2. Presiona Fondo y, a continuación, Video
    3. Desplázate hacia abajo y arrastra la imagen al cargador de imágenes. También puedes usar una imagen de stock.
    4. Haz clic en Guardar.

    En la versión 7.1, la imagen de reserva para dispositivos móviles también aparece mientras se carga el video.

    Consejo: Agrega un .gif animado como tu imagen alternativa para móvil para crear un efecto similar.

    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

    En las Páginas de Portada, usa el ajuste Fondo: color.

    Paso 6 - Añade una superposición de color (solo en Páginas de Portada)

    La superposición añade un tinte a los videos de fondo en Páginas de Portada. Por defecto, el color es un tono de gris complementario a tu video. Dado que el efecto visual de estos ajustes depende del video y si has creado un filtro o no, te recomendamos intentar con diferentes colores y grados de transparencia hasta encontrar la combinación que mejor se adapte a tu video.

    Para cambiar el color de superposición:

    1. En el panel Página de portada o en el Menú Principal, haz clic en Estilo.
    2. Desplázate hasta Video Background (Fondo de video).
    3. Haz clic en Custom Overlay Color (Color de Superposición Personalizado).
    4. Elige un nuevo color de la rueda.
    5. También puedes seleccionar un Overlay Color Blend Mode (Modo de Transparencia del Color de Superposición) del menú desplegable para cambiar cómo se verá el color.
    Para las cabeceras de páginas web: Si tu plantilla admite superposición del texto de la cabecera o un color de superposición de la cabecera, esta se verá por encima del video de la cabecera. La superposición en la cabecera del sitio web no ofrece un Modo de Transparencia del Color de Superposición.

    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.

    • Versión 7.0: En la pestaña o el panel Medios, haz clic en Imagen y, a continuación, en Guardar
    • Versión 7.1: Presiona el icono del lápiz para editar la sección y, a continuación Imagen en la pestaña Fondo.

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

    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. Luego sigue los pasos anteriores para agregar la URL del video.
    ¿Fue útil este artículo?
    Usuarios a los que les pareció útil: 139 de 259
    Añadir videos de fondo