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

Use vídeos em segundo plano para adicionar efeitos visuais dinâmicos ao seu site. Por exemplo, você pode incluir texto e imagens em vídeos de fundo para adicionar mais dimensão e conteúdo dinâmico às suas páginas. Esses vídeos são reproduzidos em loop e não têm som. Para vídeos em segundo plano, você pode:

Para uma aparência personalizada, você também pode aplicar filtros estilizados e cores de sobreposição.

Dica: você também pode adicionar fundos animados com efeitos de imagem e arte de fundo exclusiva. Para saber mais, acesse Animações e efeitos de imagem.

Antes de começar

Dicas gerais

  • Seu serviço de hospedagem de vídeo é responsável pela qualidade e resolução de seus vídeos transmitidos. A qualidade do fluxo está fora do controle do Squarespace. Se seus vídeos aparecerem baixa qualidade, certifique-se de seguir nossas dicas de design. Entre em contato com seu serviço de hospedagem de vídeo se a qualidade não melhorar.
  • Dependendo da velocidade da conexão do visitante e da versão do browser, os banners de vídeo que seguem nossas dicas de design aparecem no computador, mas nem sempre na versão móvel. Se o banner de vídeo não carregar, crie uma imagem de contingência para dispositivos móveis para aparecer.
  • 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.
  • Embora os vídeos em segundo plano aceitem URLs do YouTube e do Vimeo, eles não aceitam a adição de 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 ótima maneira de adicionar interesse visual ao seu site, mas eles não devem distrair o conteúdo do outro site. Aqui estão algumas práticas recomendadas para ajudar seu vídeo em segundo plano a ter uma ótima aparência. Se você estiver enviando um vídeo de fundo, saiba mais sobre nossos requisitos de vídeo.

Quando estiver considerando quais vídeos usar em segundo plano, siga estas dicas:

Gorjeta Notas
Como manter o arquivo de vídeo pequeno

Para vídeos incorporados, não há limite de duração de vídeo. Para vídeos enviados, o limite de comprimento é de 60 segundos. O tamanho do vídeo e a resolução fatoram no 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 visitante. Lembre-se:

  • Uma taxa de quadros ideal é de cerca de 60 quadros por segundo, especialmente se o vídeo for exibido em câmera lenta.
  • Se o vídeo parecer embaçado em dispositivos móveis, tente aumentar a taxa de quadros para mais de 60 quadros por segundo e, em seguida, reenvie o vídeo.
  • Mantenha a duração do vídeo abaixo de 40 segundos.
  • Vídeos mais curtos podem exibir a cor de fundo com mais frequência ao fazer um loop.
  • Use uma resolução de 1080p e uma taxa de bits de pelo menos 3 Mbps.
  • Ao filmar vídeos, limite o movimento da foto ou o movimento de objetos na foto. Menos movimento geralmente resulta em vídeos de fundo mais suaves.
Limitar o número de vídeos em segundo plano por página
  • Adicione dois ou menos vídeos de fundo por página. Dessa forma, você reduzirá o tamanho da página, levando a tempos de carregamento mais curtos.
Escolha vídeos com transições suaves
  • Para manter seus vídeos acessíveis, evite conteúdo em seu vídeo que pisque três ou mais vezes em um segundo período.
  • Considere transições e evite cortes rápidos ou excesso de movimentos. Vídeos que parecem pular podem distrair os visitantes.
Contraste com texto Para saber mais sobre o contraste de cores, acesse Tornar seu site Squarespace mais acessível.

Etapa 1 - Prepare seu arquivo de vídeo ou URL

Para adicionar um vídeo em segundo plano, você pode fazer upload do arquivo de vídeo para um plano de fundo de seção na versão 7.1. Você também pode enviar seu vídeo para o YouTube ou Vimeo e encontrar a URL de compartilhamento.

Atenção: o URL não pode incluir carimbo de data/hora em uma seção específica do vídeo, ou o vídeo não será carregado.

Carregue seu vídeo

Para preparar seu arquivo de vídeo para upload, certifique-se de que ele atenda aos nossos requisitos de upload de vídeo.

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. Veja se as configurações de privacidade do vídeo estão como Qualquer pessoa e permitem a incorporação em qualquer lugar; ou Oculte este vídeo do Vimeo.com e permite 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 para adicionar um vídeo dependem da versão do seu site e de onde você está adicionando 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 seções de blog, eventos e loja. Certifique-se de que seu vídeo siga nossos requisitos de vídeo. Para adicionar um vídeo em segundo plano:

  1. No Menu Inicial, clique em Páginas e, em seguida, clique na página com a seção que você gostaria de editar.
  2. No canto superior esquerdo, clique em Editar.
  3. Clique no ícone de lápis da seção e clique em Plano de fundo.
  4. Clique em Vídeo e, em seguida, clique no ícone +. Escolha uma fonte de vídeo no menu suspenso. Para obter etapas detalhadas, visite a seção abaixo.
  5. Role para baixo para personalizar outras configurações do vídeo.
  6. Passe o cursor sobre Concluído e clique em Salvar.

Escolher um vídeo

Depois de clicar no ícone +, escolha como adicionar seu vídeo:

Banner de página

Em alguns templates, é 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 Menu Inicial, clique em 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 templates, é 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 plano de fundo ao bloqueio de tela no lugar de uma imagem ou de um slideshow. Todos os templates aceitam bloqueio de tela.

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

  1. No 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 de 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.

Etapa 4 – Alterar a velocidade de reprodução

Se estiver usando um link de URL do YouTube ou do Vimeo, você pode alterar a configuração em Velocidade de reprodução para aumentar ou diminuir a velocidade do seu vídeo. A velocidade padrão é 1x, o que significa que o vídeo é 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. Você pode especificar uma imagem de contingência para dispositivos móveis para aparecer quando o vídeo do banner não carregar. Essa imagem também aceita filtros. Para 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 seu 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 fundo do vídeo.
  2. Clique em Plano de Fundo e, em seguida, clique em Vídeo.
  3. Em Imagem de contingência para dispositivos móveis, clique em Adicionar imagem para carregar uma imagem; ou clique em Procurar imagens para 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, aparecerá uma cor de fundo na versão móvel. Essa cor segue as cores da seção.

  1. Na aba Vídeo do painel Mídias, role até Imagem de contingência para dispositivos móveis.
  2. Clique em Carregar imagem ou Procurar imagem para reutilizar uma imagem ou adicionar uma imagem de acervo.
  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 de 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.

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 ou excluir o vídeo de fundo

Para remover um vídeo de fundo existente, você pode desativar ou excluir o vídeo. Para desativar os vídeos de fundo, mude para uma imagem de fundo. Dessa forma, a imagem definida substitui o vídeo de fundo. Só é possível excluir vídeos em segundo plano nos sites da versão 7.1. Se você excluir um vídeo, ele libera espaço de armazenamento de vídeo em seu site.

Para desativar o vídeo em segundo plano:

  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 fundo e depois em Imagem.
  3. Clique em Save (Salvar).

Cada site tem 30 minutos de armazenamento de vídeo. Se você atingir esse limite, poderá excluir vídeos para liberar espaço de armazenamento. Não é possível excluir mais de um vídeo por vez.

Para excluir um vídeo de fundo de seção:

  1. No editor de seção, clique em Plano de fundo.
  2. Clique em Vídeo e, em seguida, clique no ícone +.
  3. Clique em Selecionar da biblioteca
  4. Verifique o vídeo que você deseja excluir e clique em Excluir.
  1. No painel Páginas, passe o cursor sobre o título da página no painel esquerdo e clique em "a.
  2. Clique em Mídia e depois em Imagem.
  3. Clique em Save (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: 211 de 479