Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o espanhol, outros guias estão disponíveis apenas em inglês.
Adicione vídeos de fundo

Você pode incorporar vídeos de fundo do YouTube e Vimeo nas Páginas de Entrada e banners de página de alguns templates. Vídeos de fundo são reproduzidos repetidamente sem som e adicionam um efeito visual dinâmico ao seu site.

Vídeos de fundo obtêm URLs de compartilhamento de vídeo do Vimeo ou do YouTube. Para um visual e uma experiência personalizados, é possível aplicar filtros estilizados e sobreposição de cores.

Assistir a um vídeo

Este vídeo é sobre o Squarespace versão 7.0

Antes de começar

Dicas gerais

  • O plano de fundo da página ou a cor de sobreposição do banner será exibido enquanto o vídeo carrega. Se o vídeo demorar alguns segundos para carregar, a imagem de fallback móvel pode ser exibida. O tempo de carregamento depende de sua conexão à internet.
  • Banners de vídeo às vezes não aparecem na versão móvel, dependendo da versão do navegador e da velocidade da conexão do visitante. Defina uma imagem de contingência para dispositivos móveis para ser exibido quando não for possível carregar o banner do vídeo.
  • Não há limites de vídeos, embora vídeos mais curtos mostrem as cores de fundo com mais frequência ao se repetirem.
  • Vídeos de fundo não suportam código de incorporação.

YouTube

  • Defina o vídeo como Público/Não Listado e permita a incorporação. Vídeos do YouTube Privados não são exibidos como vídeos de fundo.
  • Desativar anúncios sobrepostos. Se o vídeo tem anúncios sobrepostos habilitados, os anúncios serão exibidos sobre o vídeo de fundo.
  • Dependendo do layout escolhido e do dispositivo que os visitantes usam, talvez eles vejam brevemente o logo do YouTube no canto inferior direito do vídeo. Aplique o filtro de Desfocar no vídeo para deixar o logo mais sutil.
  • Os anúncios em vídeo reproduzidos antes do vídeo, também conhecidos como anúncios pre-roll, não são reproduzidos sobre vídeos de fundo.

Vimeo

  • É necessário ter uma conta do plano Vimeo Plus, ou superior, para adicionar um vídeo de fundo do Vimeo.
  • Edite suas configurações de privacidade no Vimeo para garantir que seus vídeos possam ser incorporados. Defina o vídeo como Todos e permita a incorporação Em qualquer local. Vídeos do Vimeo Privados não são exibidos como vídeos de fundo.
  • Você também pode definir o vídeo como Ocultar este vídeo do Vimeo.com e permitir a incorporação Somente em sites que eu escolher.

Dicas de design

Vídeos em segundo plano são uma excelente maneira de acrescentar interesse visual ao seu site, mas os vídeos não devem ser uma distração para o conteúdo do site. Aqui estão algumas práticas recomendadas que manterão seu vídeo em segundo plano com uma aparência incrível.

Como manter o arquivo de vídeo pequeno

A duração e a resolução do vídeo contribuem para o tamanho do arquivo de vídeo. Arquivos de vídeo grandes demoram mais para serem carregados e podem fazer com que o vídeo pause durante a reprodução, dependendo da conexão do vistante.

Embora não haja um limite de tempo oficial, recomendamos que você mantenha os vídeos em segundo plano, se possível, com menos de 40 segundos. Uma maneira de deixar os vídeos mais curtos é escolher conteúdos que se repitam de forma integrada, fazendo com que o vídeo pareça mais longo, porém, ocupando menos espaço.

Recomendamos a utilização de vídeos com:  

  • Uma taxa de quadros de aproximadamente 25 quadros por segundo.
  • Uma resolução de 720p, ou seja, 1280 x 720 pixels.

Escolha um conteúdo com transições suaves

Ao escolher um vídeo, fique atento às transições para evitar cortes rápidos e excesso de movimentos. Vídeos que parecem saltar podem distrair o visitante.

Garanta que haja contraste com o texto

Mantenha seu vídeo em segundo plano compatível com os estilos de seu site, principalmente no que diz respeito à cor do texto que houver sobre o vídeo. Certifique-se de que os visitantes possam ler seu texto em todos os trechos do vídeo.

Caso não haja contraste suficiente, você pode:

Passo 1 - Encontrar a URL de seu vídeo

Para adicionar um vídeo de fundo, carregue-o no YouTube ou Vimeo e encontre sua URL de compartilhamento. Não é possível fazer upload de um vídeo diretamente para o Squarespace ou incorporar vídeos hospedados em um serviço diferente.

YouTube

  1. Crie ou faça login em uma conta do YouTube.
  2. Carregue um vídeo ou encontre um que já tenha sido carregado.
  3. Verifique se o vídeo está definido como Não Listado/Público e se ele permite incorporação.
  4. Copie o URL de compartilhamento do vídeo.

Vimeo

  1. Crie ou faça login em uma conta do Vimeo.
  2. Carregue um vídeo ou encontre um que já tenha sido carregado.
  3. Verifique se o vídeo está definido como Todos e se ele permite incorporação.
  4. Copie o URL de compartilhamento do vídeo.

Passo 2 - Adicionar o vídeo

Os passos para adicionar o vídeo são diferentes para banners de página e Páginas de Entrada do site. Siga os passos abaixo de acordo com o lugar onde você vai adicionar o vídeo.

Nota: antes da adição da URL, será exibido um vídeo curto do oceano como marcador de posição de demonstração.

Banner de página

Em alguns templates, é possível adicionar um fundo em vídeo a um banner de página do website no lugar de uma imagem estática de banner. Isso gera um efeito visual bem legal quando combinado com sobreposições de texto.

A maneira de adicionar vídeos a um banner da página depende da versão do Squarespace usada pelo site.

  1. No Home Menu (Menu Inicial), clique em Pages (Páginas).
  2. Mova o cursor sobre o título da página no painel esquerdo e, em seguida, clique no [ícone da engrenagem].
  3. Clique na aba Mídia.
  4. Em Mídia , clique na aba Vídeo.
  5. Cole o URL de seu vídeo no campo Video URL (URL do Vídeo) .
  6. Clique em Save (Salvar).
  1. No Home Menu (Menu Inicial), clique em Pages (Páginas).
  2. Clique na página em que você gostaria de adicionar o banner e clique em Editar.
  3. Adicione uma seção de bloco e clique no ícone do lápis.
  4. Clique em Plano de Fundo e, em seguida, clique em Vídeo.
  5. Cole a URL do vídeo no campo Vídeo.
  6. Role para baixo para personalizar outras configurações do vídeo.
  7. Clique em Save (Salvar).

Templates suportados

Nas seguintes famílias de template, é possível adicionar vídeos de banner nos tipos de página listados abaixo:

  • Adirondack - Layout, Produto, Álbum, Eventos, Blog
  • Bedford - Layout, Produto, Álbum, Eventos, Blog
  • Brine - Layout, Álbum, Eventos, Blog
  • Five - Layout, Álbum, Eventos, Blog
  • Montauk - Layout, eventos, blog, índice. É necessário ter uma imagem de contingência para dispositivos móveis.
  • Pacific - Layout, Produto, Álbum, Eventos, Blog
  • Tremont - Layout, Produto, Álbum, Eventos, Blog
  • York - Layout, Produto, Álbum, Eventos, Blog, Projeto, Índice
  • Versão 7.1 - Seções de bloco para todas as páginas

Fundo da Página de Entrada

Para adicionar o vídeo a uma Página de Entrada:

  1. Abra uma Página de Entrada existente ou adicione uma nova:
  • Para sites com Cover Pages (Páginas de Entrada) de página única: No Home Menu (Menu Inicial), clique em Media (Mídia).
  • Para Cover Pages (Páginas de Entrada) adicionadas a sites ou lojas: No Menu Home (Menu Inicial), clique em Pages (Páginas).
  • Clique em Media (Mídia).
  • No painel Mídia, clique na guia de Vídeo.
  • Cole o URL de compartilhamento de seu vídeo no campo Video URL (URL do Vídeo) .
  • Layouts suportados

    Na maioria dos layouts de Páginas de Entrada, os vídeos são reproduzidos em um fundo sem margens por trás de seu conteúdo, estendendo-se até as bordas do navegador.

    Existem algumas exceções. Estes layouts exibem vídeos de forma diferente:

    • Aparece no painel lateral - Backstory, Flash, Spotlight, Session, Vignette
    • Exibem na área de retrato circular - Focus, Monocle
    • Não aceitam vídeo - Flagship, Harbor

    Tela de Bloqueio

    Você pode adicionar um vídeo de plano de fundo à sua tela de bloqueio no lugar de uma imagem ou de um slideshow. Todos os templates são compatíveis com telas de bloqueio.

    Para adicionar um vídeo a uma tela de bloqueio:

    1. Em Home Menu (Menu Inicial), clique em Design.
    2. Clique em Lock Screen (Tela de Bloqueio).
    3. Clique em Media (Mídia).
    4. Clique na guia Vídeo.
    5. Cole o URL do seu vídeo no campo Video URL (URL do Vídeo).

    Passo 3 - Adicionar um filtro

    Filtros alteram a aparência do vídeo e estilizam seu visual. Os filtros também afetam a imagem alternativa para dispositivos móveis de vídeos. O efeito do filtro depende da cor e das imagens do vídeo, por isso recomendamos realizar testes para encontrar o efeito adequado.

    Para adicionar um filtro:

    Clique no menu suspenso Filter (Filtro) na aba Vídeo e escolha entre:

    • Blur (Desfoque)
    • Brightness (Brilho)
    • Contrast (Contraste)
    • Invert (Inversão)
    • Opacity (Opacidade)
    • Saturate (Saturação)
    • Sepia (Sépia)

    Para todos os filtros, com exceção de Inversão, é possível ajustar a força usando o controle deslizante.

    Nota: Efeitos de filtros podem ter resultado diferente de acordo com o navegador.

    Passo 4 - Alterar a velocidade de reprodução (somente YouTube)

    Se estiver usando uma URL de vídeo do YouTube, é possível selecionar uma Velocidade de Reprodução para alterar seu ritmo. A velocidade padrão é 1x, o que significa que o vídeo será reproduzido em seu ritmo normal. Escolha entre quatro velocidades diferentes:

    • 0,5x (lento)
    • 1x (normal)
    • 1.5x (rápido)
    • 2x (mais rápido)

    Passo 5 - Adicionar uma imagem alternativa para dispostivos móveis.

    Navegadores móveis aceitam vídeos de fundo, no entanto, dependendo da versão do navegador e da velocidade da conexão do visitante, os banners de vídeo podem não carregar. Nos dispositivos móveis, é possível definir uma imagem de contingência para ser exibida quando não for possível carregar o banner do vídeo. Essa imagem de contingência também aceita filtros. Para obter o melhor resultado, formate a imagem para exibição web antes de carregá-la.

    A maneira de adicionar uma imagem de contingência para dispositivos móveis depende da versão do Squarespace usada pelo site.

    1. No painel Mídia, clique na guia de Vídeo.
    2. Desça a tela e arraste a imagem até o uploader de imagem. Você também pode usar um banco de imagem.
    3. Clique em Save (Salvar).
    1. Na seção que você estiver editando, clique no ícone do lápis
    2. Clique em Plano de Fundo e, em seguida, clique em Vídeo
    3. Desça a tela e arraste a imagem até o uploader de imagem. Você também pode usar um banco de imagem.
    4. Clique em Save (Salvar).

    Na versão 7.1, a imagem de contingência para dispositivos móveis também aparece enquanto o vídeo é carregado.

    Dica: Adicione um .gif animado como sua imagem alternativa para dispositivos móveis para criar um efeito semelhante.

    Se você não adicionar uma imagem de contingência para dispositivos móveis, aparecerá uma cor de fundo na versão móvel. Você pode escolher a cor nas seguintes famílias de template:

    • Adirondack - ajuste Cor de fundo do conteúdo
    • Bedford - ajuste Cor de sobreposição do banner
    • Brine ajuste Cor de sobreposição
    • Five - ajustes Cor de sobreposição do banner e Fundo do cabeçalho
    • Montauk - ajuste Fundo da tela de trabalho
    • Pacific - ajuste Cor de sobreposição
    • Tremont - ajuste Cor do fundo do site
    • York - ajuste Cor de fundo

    Na Página de Entrada, use o ajuste Fundo: cor.

    Passo 6 - Adicionar uma cor de sobreposição (somente Páginas de Entrada)

    Sobreposições adicionam uma tonalidade a vídeos de fundo em Páginas de Entrada. Por padrão, a cor é uma tonalidade de cinza que complementa seu vídeo. Como o efeito visual destas configurações depende de seu vídeo e de um filtro ter sido definido, recomendamos explorar diferentes cores e modos de mistura para encontrar uma combinação ideal para seu vídeo.

    Para alterar a cor de sobreposição:

    1. No painel da Página de Entrada ou no Home Menu (Menu Inicia)l, clique em Style (Estilo).
    2. Desça até Video Background (Fundo do Vídeo).
    3. Clique em Custom Overlay Color (Cor de Sobreposição Personalizada).
    4. Escolha uma nova cor na roda.
    5. Também é possível selecionar um Overlay Color Blend Mode (Modo de Mistura de Cores para Sobreposição) no menu suspenso para alterar a forma como a cor é exibida.
    Para banners de páginas de site: Se seu template suporta sobreposições com texto de banner ou uma cor de sobreposição de banner, isso será exibido sobre o vídeo do banner. Sobreposições de banners de site não oferecem um Modo de Mistura de Cor para Sobreposição.

    Desativar o vídeo de fundo

    Para desativar o vídeo de fundo, mude para uma imagem de fundo. A imagem definida substituirá o vídeo de fundo.

    • Versão 7.0 - Na aba Mídia  ou no painel, clique em Imagem e, em seguida, clique em Salvar. 
    • Versão 7.1 - Clique no ícone do lápis para editar a seção, depois clique em Imagem na aba Plano de Fundo.

    Se estiver usando uma Página de Entrada, também é possível escolher Nenhum para substituir o vídeo com uma cor de fundo.

    Banners de vídeo nas páginas do Índice

    Você pode adicionar um banner de vídeo às páginas dentro das Páginas Índice das seguintes famílias de template:

    • Bedford
    • Brine
    • Montauk
    • Pacific
    • York

    Para adicionar o vídeo:

    1. Abra as configurações da subpágina
    2. Clique em Mídia e depois em Vídeo.
    3. Siga os steps acima para adicionar a URL do vídeo.
    Esse artigo foi útil?
    Usuários que acharam isso útil: 144 de 272
    Adicione vídeos de fundo