Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Adicione vídeos de fundo

Você pode incorporar vídeos em segundo plano do YouTube e do Vimeo em seções de página, banners e outras áreas, dependendo da versão do seu site. Os vídeos de fundo são reproduzidos em um loop sem som e adicionam um efeito visual dinâmico ao site. Para conseguir uma aparência personalizada, você pode aplicar filtros estilizados e cores sobrepostas.

Antes de começar

Dicas gerais

  • O fundo da página ou a cor de sobreposição do banner aparecerá enquanto o vídeo carrega. Se o vídeo demorar alguns segundos para carregar, a imagem de contingência para dispositivos móveis pode aparecer. O tempo de carregamento depende da conexão à Internet.
  • Às vezes os banners de vídeo não aparecem na versão móvel, dependendo da versão do browser e da velocidade da conexão do visitante. Nos dispositivos móveis, defina uma imagem de contingência para que ela apareça 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 aceitam código de incorporação.

YouTube

  • Desative os anúncios de sobreposição ou eles serão exibidos sobre o vídeo em segundo plano.
  • Seus visitantes poderão ver brevemente um logotipo do YouTube, o título do vídeo, um ícone de exibição ou um ícone de compartilhamento quando o vídeo for carregado. Isso depende do layout e do dispositivo.
  • 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

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.

Observação: certifique-se de que o URL não inclua um carimbo de data/hora para uma seção específica do vídeo, pois isso impedirá que ele seja carregado. 

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 ou Público e se permite a 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 as configurações de privacidade do vídeo estão definidas como Qualquer pessoa e permitem a incorporação em qualquer lugar , ou Oculte este vídeo do Vimeo.com e permita a incorporação Somente nos sites que eu escolher.
  4. Copie o URL de compartilhamento do vídeo.

Passo 2 - Adicionar o vídeo

As etapas da inclusão dependem da versão do seu site e de onde você vai adicionar o vídeo.

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

Fundos da seção

Você pode adicionar vídeos em segundo plano a qualquer seção, exceto em blog, eventos e seções de armazenamento. Para adicionar um vídeo de fundo:

  1. No Home Menu (Menu Inicial), clique em Pages (Páginas).
  2. Clique na página em que deseja adicionar o vídeo e, em seguida, clique em Editar.
  3. Passe o mouse sobre a seção 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. Passe o cursor sobre Concluído e clique em Salvar.

Banner de página

Em alguns modelos, é possível adicionar um plano de fundo de vídeo a um banner de página do site. Isso cria um ótimo efeito visual quando combinado com sobreposições de texto.

  1. No Home Menu (Menu Inicial), clique em Pages (Páginas).
  2. Passe o mouse sobre o título da página no painel esquerdo e clique em "a.
  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) .

Templates suportados

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

  • Adirondack — Layout, Produtos, Álbum, Eventos, Blog
  • Bedford — Layout, Produtos, Álbum, Eventos, Blog
  • Brine - Layout, Álbum, Eventos, Blog
  • Five - Layout, Álbum, Eventos, Blog
  • Montauk - Layout, eventos, blog, índice (deve ter uma imagem de contingência para dispositivos móveis)
  • Pacific — Layout, Produtos, Álbum, Eventos, Blog
  • Tremont — Layout, Produtos, Álbum, Eventos, Blog
  • York - Layout, Produtos, Álbum, Eventos, Blog, Projeto, Índice

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 as etapas acima para adicionar o URL do vídeo.

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.
  2. Clique em Media (Mídia).
  3. No painel Mídia, clique na guia de Vídeo.
  4. 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.

Há exceções:

  • Aparecem no painel lateral — Backstory, Flash, Spotlight, Session, Vignette
  • Aparecem na área de retrato circular — Foco, Monóculo
  • Não aceitam vídeo - Flagship, Harbor

Tela de Bloqueio

Você pode adicionar um vídeo de fundo à tela de bloqueio no lugar de uma imagem ou uma apresentação de slides. Todos os sites suportam 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 Filtro na guia Vídeo. Para todos os filtros, exceto Inverter, você pode ajustar a força com o controle deslizante. Os efeitos de filtro podem ser renderizados de forma diferente entre navegadores.

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.

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 forma como você adiciona uma imagem de contingência para dispositivos móveis depende da versão do site. Para adicionar uma imagem de contingência para dispositivos móveis:

  1. Clique em Editar na página e, em seguida, clique no ícone do lápis na seção com o plano de fundo do vídeo.
  2. Clique em Plano de Fundo e, em seguida, clique em Vídeo
  3. Em Imagem de fallback móvel, clique em Adicionar uma imagempara carregar uma imagem ou clique em Pesquisarimagenspara reutilizar uma imagem ou adicionar uma imagem de acervo .
  4. Passe o cursor sobre Concluído e clique em Salvar.

A imagem de contingência para dispositivos móveis também é exibida enquanto o vídeo é carregado.

Se você não adicionar uma imagem de contingência para dispositivos móveis, será exibida uma cor de fundo no celular. Essa cor é definida pelas cores da seção

  1. Na guia Vídeo do painel Mídia , role para baixo até Imagem de contingência para dispositivos móveis .
  2. Clique em Carregar uma imagemou Pesquisar imagem parareutilizar uma imagem ou adicionar uma imagem de stock.
  3. Clique em Save (Salvar).

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

Para Páginas de entrada, use o ajuste Background: Color.

Dica: adicione um .gif animado como a sua imagem de contingência para dispositivos móveis para criar um efeito semelhante ao vídeo.

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.

  1. Clique em Editar na página e, em seguida, clique no ícone do lápis na seção com o vídeo. 
  2. Clique em Plano de fundoe, em seguida, clique em Imagem.
  3. Clique em Salvar.
  1. No painel Páginas , passe o mouse sobre o título da página no painel esquerdo e clique em "a.
  2. Clique em Mídiae, em seguida, clique em Imagem.
  3. Clique em Salvar.

Se você estiver usando uma Página de Entrada, também poderá escolher Nenhum para substituir o vídeo por uma cor de plano de fundo

Assistir a um vídeo

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

Este artigo foi útil?
Utilizadores que acharam útil: 173 de 351
Adicione vídeos de fundo