Como usar vídeos no Plano de Fundo (background) do Site

Os vídeos sempre representaram uma poderosa forma de fazer comunicação visual. Prova disso é a influência predominante da televisão e dos filmes. As “imagens em movimento” caíram no gosto dos seres humanos desde sua invenção.

Uma tendência do Webdesign em 2014 foi usar vídeos como plano de fundo, saindo do padrão em cores ou imagens. Essa mesma tendência prevalece para 2015.

Background com vídeos costumam ser bem aceitos pelo público, além de transmitir modernidade, eles focalizam o tema que o site aborda, dando-lhes mais ênfase.

Requisitos

Pôr vídeos no plano de fundo de um site não é o mesmo que pôr uma simples imagem. É necessário seguir algumas regras para não acabar fazendo feio:

Sem áudio

Geralmente os vídeos estarão ajustados para iniciar automaticamente, assim que o visitante abrir a página. Por este motivo, nada de som. Se o usuário se interessar pelo vídeo, ele mesmo irá buscar o botão para ativar o som (que logicamente, deve estar disponível no player).

Curta duração

O comprimento do vídeo não deve ser exageradamente curto (como os Gifs animados que causam irritação) e também não podem ser longos, pois causariam desgaste visual. Especialistas indicam que o tamanho ideal para esta aplicação, em média, deve estar entre 15 a 25 segundos de duração.

Loop

A repetição automática do vídeo é um fator importante, pois oferece ao usuário a oportunidade de rever a apresentação do vídeo sem a necessidade de ficar buscando controles do player (que provavelmente estará oculto).

Como fazer para ter vídeos no background em um site Wix?

O Wix permite a adição de vídeos como backgrounds que podem ser inseridos diretamente pelo editor.

Siga os passos:

1. Entre no editor e clique em ‘Background‘:

2. Na janela que abrir, escolha a opção ‘Vídeo‘:

3. Para enviar vídeos, clique no botão ‘Fazer upload de vídeos‘ e aguarde o carregamento. Você também pode usar os vídeos disponíveis no acervo gratuito do Wix.

Depois de escolher o seu video para usar de background, clique no botão ‘Alterar background‘.

4. Na janela de background, há a opção para acessar as Configurações do vídeo e um botão de player para visualizar a reprodução do mesmo:

5. Clique em ‘Configurações‘ para ver as seguintes opções de vídeo:

  • Sobreposição de Textura: uma fina camada ficará sobreposta ao vídeo. Essa opção é muito interessante para dar um design mais arrojado ao vídeo.
  • Sobreposição de Cor: permite a escolha de uma cor para ser sobreposta ao vídeo.
  • Opacidade: permite o aumento ou diminuição do nível de transparência da cor sobreposta.
  • Velocidade de reprodução: escolha entre nível lento, normal, rápido.
  • Tocar continuamente: marque se deseja que vídeo repita automaticamente (recomendado).

Após isso, basta publicar a atualização.

Como encontrar vídeos para usar como fundo?

Se você ficou interessado em testar esse recurso em seu site, veja como fazer para conseguir vídeos para seu projeto.

3 excelentes sites para baixar vídeos background grátis

Pela qualidade dos vídeos e por conter material grátis, recomendo os seguintes sites para baixar vídeos que podem ser usados como plano de fundo:

1. Videvo.net

Oferece grande variedade de vídeos em alta qualidade, em vários tipos de temas (animais, indústrias, medicina, música, natureza, pessoas, produção, etc). O site tem vídeos super curtos e que foram produzidos unicamente para serem usados em background, tanto que estão sem som.

Como fazer?

  1. Entre no Videvo.net.
  2. Selecione uma categoria e escolha um vídeo de sua preferência.
  3. Abaixo do player, marque ‘Accept‘ em ‘Step 2‘ e clique em ‘Download‘.

Obs: é necessário fazer um registro no site para poder baixar vídeos.

2. XStockvideo.com

Este site disponibiliza uma seleção de vídeos em HD, alguns gratuitos e outros pagos.

  • Para baixar, acesse o XStock.
  • Escolha um vídeo marcado com a faixa ‘Free HD‘ e clique sobre ele.
  • Na página seguinte, selecione uma resolução e clique no botão ‘Free‘:

Obs: é necessário fazer um registro no site para poder baixar vídeos.

3. Mazwai.com

Eu achei o Mazwai um site fantástico, ele oferece uma vasta gama de vídeos que podem ser baixados gratuitamente, sem necessidade de registro.

Tudo que você precisa fazer é clicar sobre um vídeo e, ao abrir o player, clicar no botão de download.

O que fazer com os vídeos baixados?

Para usar como plano de fundo, você precisa enviá-los para o Youtube. Sendo assim, use sua conta do Google para mandar o vídeo ao Youtube e depois copia a URL do vídeo e cole no app do Wix.

Lembrando que você mesmo pode criar seus próprios vídeos para usar como background.

É isso!

16 comentários em “Como usar vídeos no Plano de Fundo (background) do Site”

  1. Ola Gabriel Martins!
    Upei um vídeo e defini como background da página Home, o problema é que o vídeo demora pra caramba para reproduzir com fluidez, como se estivesse carregando. Pelo exemplo aqui, os vídeos demonstrados possuem de 18 a 38 MB, o vídeo que formatei possui apenas 3,6 MB a 30 fps. Testei em três computadores, em redes diferentes e o problema ocorre em todas. Saberia se o problema pode estar nos servidores WIX que estão com a taxa de trafego baixa?

    Responder
  2. Gabriel, boa noite

    Inseri o video do youtube para simular um fundo de tela, conforme todos os passos informados, publiquei e funcionou, porém na hora que o vídeo acaba, exemplo, 10 segundos depois, ele antes de efetuar o looping a tela fica preta e apararece o loading por uns 3 segundos e mata toda a jogada, como resolver isso?

    Responder
  3. Amiogo, voltei rsrsrss… seguinte, preciso de uma luz sua, e nem sei se o wix me da essa oportunidade… seguinte, de uma olhada nesse exemplo.

    no link +work a pagina passa por cima de um background, como fazer isso no wix?

    teria como vc, montar um tutorial sobre esse assunto?

    abraços e boa páscoa!

    Responder
    • Olá Jefferson,
      Não sei te dizer como fazer tal efeito. Essa página que mostrou apenas deixa uma imagem com aparência de background. Mas existem sites sim que deixam o background fixo e as páginas ficam rolando por cima. Em templates premium WordPress há muitos deles.
      Abraço.

      Responder
  4. Joguei o vídeo para o cabeçalho e joguei ele para a esquerda até ficar no limite da página do lado esquerdo… e a barra de rolagem horizontal ficou quase nula… 🙂 Só o vídeo que deve ser bem escolhido…

    Responder
  5. Amigo Gabriel, conforme falado, segue o link do site que fiz para um cliente, utilizando a técnica acima divulgada por você, agradeço a você pelo compartilhamento de ensinos, ainda nao sou um expert na plataforma wix, mais vou me virando… abraços e ate a próxima.

    dê uma olhada no site:
    abçs

    Responder
  6. ok amigo Gabriel, sim eu ja vi que o site deles esta hospedado no youtube, aprendi mais sobre essa ferramenta, agora ficou sobre o meu controle total, uma dica, quando clica no video abre uma outra janela e etc… do youtube certo, pois bem eu nao queria isso acho que “mata” o “como foi feito” entao, eu resolvi da seguinte maneira, dentro da plataforma wix eu coloquei uma faixa sobre o video, com isso o mesmo nao fica “editavel” on line…infelizmente isso nao funciona no mobile, pois o alto play nao funciona, no mobile, nos somos obrigados a apertar o botao play.

    a e sobre o meu video, eu mesmo o fiz, pois é um video personalizado para o meu cliente……..

    unico problema que estou enfrentando é com a “largura do site” vc deu como padrao o tamanho 1920 com isso fica aparecendo a barra de rolagem lateral do site, nao queria isso, mais eu acho que nao tem outra maneira né, ou tem?

    quando o meu projeto for finalizado eu volto aqui e compartilho o link, para sua analise.

    abraços

    Responder
    • Olá Jefferson,
      A largura e altura precisa ser grande desse jeito pra poder pegar toda a tela, caso contrário o vídeo ficará em formato 16:9 (widescreen), com faixas pretas aparecendo. Se você não acha que seja um problema o vídeo ficar assim, então é até bom pois a qualidade fica melhor.
      Abraço.

      Responder
  7. ola Gabriel Martins, queria muito utilizar este recurso no meu site, mais tem algo errado, mesmo vendo o exemplo do site acima ( Zenit Longboard ), e o site sendo feito na plataforma wix, o video nao foi publicado nem no youtube e ou no vimeo, pois o video no site, nao tem a barra de video dos referidos sites, entao eu lhe pergunto, onde esta hospedado este video?

    gostaria muito de receber uma resposta sua

    grato

    Jefferson

    Responder

Deixe um comentário