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

Puedes agregar videos de fondo en las Páginas de Portada y en las cabeceras 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

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.
  • Los navegadores móviles no admiten videos de fondo. Puedes reproducir una imagen alternativa para móviles en lugar del video de fondo desde dispositivos móviles.
  • 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.

YouTube

  • Configura el video como Público/No incluido en la lista 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 tus visitantes, 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 Blur filter (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

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 Público/No incluido en la lista 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 Anyone (Cualquiera) y de que admita incrustación.
  4. Copia la URL para compartir el video

Paso 2 - Agrega el video

Los pasos para agregar el video son diferentes para las Páginas de Portada y las cabeceras de páginas web. 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.

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 Home Menu (Menú Principal), haz clic en Media (Medios).
    • Para las Páginas de Portada agregadas a sitios web o tiendas: en el Home Menu (Menú Principal), haz clic en Pages (Páginas).
  2. Haz clic en Media (Medios).
  3. En el panel Media (Medios), haz clic en la pestaña Video (Video) .
  4. Pega la URL para compartir tu video en el campo Video URL (URL del Video) .

Diseños admitidos

En la mayoría de los diseñosde Página de Portada, los videos se reproducen como fondo en pantalla completa 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:

  • Flash - Lo reproduce en el panel lateral
  • Spotlight - Lo reproduce en el panel lateral
  • Vignette - Lo reproduce en el panel lateral
  • Backstory - Lo reproduce en el panel lateral
  • Session - Lo reproduce en el panel lateral
  • Focus - Lo reproduce en un área circular
  • Monocle - Lo reproduce en un área circular
  • Flagship - No admite video
  • Harbor - No admite video

Cabecera de página

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

Añade el video a una cabecera de página.

  1. En el Home Menu (Menú Principal), haz clic en Pages (Páginas).
  2. Posiciona el cursor sobre el título de la página en el panel izquierdo y haz clic en el .
  3. Haz clic en la pestaña Media (Medios)
  4. En la pestaña Media (Medios), haz clic en la pestaña Video (Video).  
  5. Pega la URL de tu video en el campo Video URL (URL del Video) .

Plantillas admitidas

Las siguientes plantillas admiten cabeceras en video en los tipos de página que se enumeran. Las plantillas se agrupan por familia.

Adirondack Página Normal, Producto, Álbum, Eventos, Blog
Bedford, Anya, Bryant, Hayden Página Normal, Producto, Álbum, Eventos, Blog
Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West Página Normal, Álbum, Eventos, Blog
Five Página Normal, Álbum, Eventos, Blog

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

(Descontinuado)

Página Normal, Producto, Eventos, Blog
Montauk, Julia, Kent, Om Página Normal, Eventos, Blog, Índice (crea una cabecera en la misma Página de Índice; las miniaturas de la cuadrícula del índice no mostrarán videos)
Pacific, Charlotte, Fulton, Horizon, Naomi Página Normal, Producto, Álbum, Eventos, Blog
Tremont, Camino, Carson, Henson Página Normal, Producto, Álbum, Eventos, Blog
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori Página Normal, Producto, Álbum, Eventos, Blog, Proyecto

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 Media (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. 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 Filter (Filtro) dentro de la pestaña Video (Video) y elige entre:

  • Blur (Difuminar)
  • Brightness (Brillo)
  • Contrast (Contraste)
  • Invert (Invertir)
  • Opacity (Opacidad)
  • Saturate (Saturar)
  • Sepia (Sepia)

Para todos los filtros excepto Invert (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 no admiten videos de fondo. Puedes reproducir una imagen alternativa para móviles en lugar del video de fondo desde dispositivos móviles. Para obtener mejores resultados, ajusta el formato de la imagen para la web antes de subirla.

Para establecer una imagen alternativa para móviles:

  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 un archivo de Getty Image con licencia.
  3. Haz clic en Save (Guardar).

Si no añades una imagen alternativa para móviles, en lugar de la imagen se mostrará un color de fondo en los dispositivos móviles. Puedes elegir este color con los siguientes ajustes del Editor de Estilo. Las plantillas se agrupan por familia.

Páginas de Portada Background: Color (Fondo: Color)
Adirondack Content Background Color (Color de fondo del Contenido)
Bedford, Anya, Bryant, Hayden Banner Overlay Color (Superposición de Color del Encabezado)
Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West Overlay Color (Superposición de Color)
Five Banner Overlay Color / Header Background (Superposición de Color de la Cabecera / Fondo del Encabezado)

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

(Descontinuado)

Image Overlay Color / Content Background Color (Color de Superposición de Imagen / Color de fondo del Contenido)
Montauk, Julia, Kent, Om Canvas Background (Fondo del área de contenido principal)
Pacific, Charlotte, Fulton, Horizon, Naomi Overlay Color (Superposición de Color)
Tremont, Camino, Carson, Henson Site Background Color (Color de Fondo del Sitio)
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori Background Color (Color de Fondo)

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 Home Menu (Menú Principal), haz clic en Style (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.

En la pestaña o el panelMedia (Medios), haz clic en Image (Imagen), luego haz clic en Save (Guardar). La imagen establecida reemplazará al video de fondo.

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

Cabeceras en video en un índice

Puedes añadir cabeceras en video al Índice en determinadas plantillas. Las plantillas se agrupan por familia.

  • Bedford, Anya, Bryant, Hayden
  • Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (descontinuadas)
  • Montauk, Julia, Kent, Om
  • Pacific, Charlotte, Fulton, Horizon, Naomi
  • York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 73 de 112
Agregar un video de fondo