Adicione efeitos visuais interessantes com vídeos reproduzidos automaticamente atrás do conteúdo do site.

Uma maneira de estilizar o plano de fundo do seu site é usar vídeos para obter um efeito visual dinâmico. Por exemplo, você pode incluir texto e imagens sobre 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 são silenciosos. Para vídeos de fundo, você pode:

• Usar vídeos do YouTube e Vimeo em seções, banners e outras áreas da página, dependendo da versão do site.
• Carregar um vídeo seu no plano de fundo das seções na versão 7.1.

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

Aprenda sobre todas as opções de estilo de plano de fundo em Estilizar o plano de fundo do site.

Dica: você também pode adicionar planos de fundo animados com efeitos de imagem e arte de fundo exclusiva. Para saber mais, acesse Imagens de fundo da seção e Arte de fundo da seção.

Assistir a um vídeo

Antes de começar

Dicas gerais

• O seu serviço de hospedagem de vídeos é responsável pela qualidade e resolução dos seus vídeos transmitidos. O Squarespace não de responsabiliza pela qualidade da transmissão. Se os vídeos tiverem baixa qualidade, siga nossas dicas de design.
• Os vídeos carregados para o Squarespace podem ser em 1.080 p ou 360 p, dependendo do aparelho, do browser e da conexão com a internet. Não é possível como selecionar manualmente a resolução.
• Dependendo da velocidade da conexão do visitante e da versão do browser, os vídeos ao fundo que seguem nossas dicas de design aparecem no computador, mas nem sempre na versão móvel. Se o vídeo ao fundo não carregar, crie uma imagem de contingência para aparelhos móveis para ele 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 aparelhos móveis pode aparecer. O tempo de carregamento depende da conexão à internet.
• Os vídeos ao fundo aceitam URL do YouTube e do Vimeo, mas não aceitam a adição de código de incorporação.
• Os aparelhos em modo de baixo consumo de energia ou de economia de energia não mostram os vídeos em segundo plano. Ao adicionar uma imagem de contingência para aparelhos móveis, aparecerá a imagem de contingência. Se você não adicionar nenhuma imagem de contingência, aparecerá uma miniatura do vídeo e um botão de reprodução que não funciona.

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

• Você precisa ter um plano Vimeo pago para adicionar um vídeo de fundo da Vimeo.
• Não é possível adicionar vídeos HD Vimeo a Páginas de Entrada ou banners.

Dicas de design

Os vídeos ao fundo são uma ótima forma de melhorar o visual do site, mas eles não podem tirar a atenção do resto do conteúdo no site. Confira algumas recomendações para deixar os vídeos ao fundo com um belo visual. Ao carregar um vídeo ao fundo, saiba mais sobre nossos requisitos de vídeo.

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

Dica	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.
Use imagens largas	O fundo da seção é ajustado automaticamente com base no conteúdo e no tamanho da janela do browser do visitante. Para minimizar os recortes, use um vídeo com proporção horizontal ou de paisagem, como 16:9. Use ou grave vídeos com os objetos centralizados e com espaço ao redor para ser recortado.
Limitar o número de vídeos em segundo plano por página	Adicione até dois vídeos ao fundo de cada página. Isso reduz o tamanho da página, o que acelera o carregamento dela.
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	Alterar a cor da fonte. Por exemplo: se o vídeo for escuro, escolha uma cor mais clara para o texto de sobreposição. Altere o brilho do vídeo com filtros. 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

Na versão 7.1, para adicionar um vídeo de fundo, você pode fazer upload do arquivo de vídeo para um fundo de seção. Você também pode enviar o vídeo para o YouTube ou Vimeo e encontrar o 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 um arquivo de vídeo para upload, veja se ele atende aos nossos requisitos de upload de vídeo. Lembre-se de que o os vídeos ao fundo enviados podem ter até 60 segundos.

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 Público ou como Ocultar do Vimeo. Permita a incorporação em qualquer lugar ou em um domínio específico. Ao permitir a incorporação somente em domínios específicos, você deve adicionar o domínio do seu site ao campo de texto que aparecer.
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.

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. Abra o painel "Bloqueio de tela".
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 - selecione a largura do plano de fundo

Os vídeos em segundo plano podem aparecer sem margens ou inseridos nas bordas da seção.

• A sangria total estende a imagem de uma borda da janela do navegador para a outra, abrangendo toda a largura do site.
• A inserção endenta ligeiramente a imagem e cria uma borda ao redor da imagem.

Se a imagem for definida como Inserção, você poderá definir a cor da borda.

Passo 4 - adicione 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 aba Vídeo. Em todos os filtros, exceto Inverter, é possível ajustar a intensidade pelo controle. A renderização dos efeitos do filtro varia de acordo com o browser.

Você pode usar o filtro Opacidade para adicionar uma cor de sobreposição. Clique na aba Cores para selecionar um tema de cores para a sobreposição e qualquer conteúdo adicionado. Saiba mais em "Alterando as cores". Ao excluir o vídeo, a sobreposição se transforma na cor de fundo da seção.

Passo 5 - altere a velocidade do vídeo

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 6 - adicione uma imagem de contingência para aparelhos 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:

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

É possível desativar ou apagar um vídeo ao fundo. Para desativar, troque para uma imagem de fundo. Dessa forma, a imagem substitui o vídeo ao fundo. Só é possível apagar um vídeo ao fundo nos sites da versão 7.1. Ao apagar o vídeo, essa ação libera espaço de armazenamento de vídeos no site.

Assista a um vídeo (versão 7.0)

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