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

You can embed background videos from YouTube and Vimeo on Cover Pages and some templates' page banners. Background videos play on loop without sound and add a dynamic visual effect to your site.

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 en los teléfonos inteligentes y tabletas 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.
  • 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 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 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

  • Debe tener una cuenta de Vimeo Plus, PRO o Business 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 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 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 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:

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

    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

    Familia Bedford

    Anya, Bryant, Bedford, Hayden

    Página Normal, Producto, Álbum, Eventos, Blog

    Familia Brine

    Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

    Página Normal, Álbum, Eventos, Blog
    Five Página Normal, Álbum, Eventos, Blog

    Familia Montauk

    Julia, Kent, Montauk, 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)

    Familia Pacific

    Charlotte, Fulton, Horizon, Naomi, Pacific

    Página Normal, Producto, Álbum, Eventos, Blog

    Familia Tremont

    Camino, Carson, Henson, Tremont

    Página Normal, Producto, Álbum, Eventos, Blog

    Familia York

    Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

    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 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 no admiten videos de fondo. Puedes reproducir una imagen alternativa para móviles en lugar del video de fondo desde dispositivos móviles. Los filtros también se aplican a la imagen alternativa para 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. Scroll down and drag your image into the image uploader. You can also use a stock image.
    3. Haz clic en Guardar.
    Consejo: Agrega un .gif animado como tu imagen alternativa para móvil para crear un efecto similar.

    If you don't add a mobile fallback image, a background color will display on mobile instead. You can choose this color with the following Site Styles tweaks. Templates are grouped by family.

    Páginas de Portada Background: Color (Fondo: Color)
    Adirondack Content Background Color (Color de fondo del Contenido)

    Familia Bedford

    Anya, Bryant, Bedford, Hayden

    Banner Overlay Color (Superposición de Color del Encabezado)

    Familia Brine

    Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

    Overlay Color (Superposición de Color)
    Five Banner Overlay Color / Header Background (Superposición de Color de la Cabecera / Fondo del Encabezado)

    Familia Montauk

    Julia, Kent, Montauk, Om

    Canvas Background (Fondo del área de contenido principal)

    Familia Pacific

    Charlotte, Fulton, Horizon, Naomi, Pacific

    Overlay Color (Superposición de Color)

    Familia Tremont

    Camino, Carson, Henson, Tremont

    Site Background Color (Color de Fondo del Sitio)

    Familia York

    Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

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

    En la pestaña o el panelMedios, haz clic en Imagen, luego haz clic en Guardar. La imagen establecida reemplazará al video de fondo.

    Si estás utilizando una Página de Portada, también puedes elegir 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.

    • Familia Bedford - Anya, Bryant, Bedford, Hayden
    • Familia Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
    • Familia Montauk - Julia, Kent, Montauk, Om
    • Familia Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
    • Familia York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

    Para agregar el video, abre las configuraciones de subpágina y haz clic en Media (Medios), y luego en  Video. Luego sigue lo pasos anteriores para agregar la URL del video.

    ¿Fue útil este artículo?
    Usuarios a los que les pareció útil: 123 de 216
    Agregar un video de fondo