Nenhum produto encontrado nessa seleção.
Provavelmente você já deve ter visto algum site utilizando vídeo como background pela Internet a fora, porém, já parou para pensar como isso é feito?
Na verdade o que você vê, normalmente não é um background em si, mas o elemento video do HTML5 com posição fixa e tamanho que ocupa a tela inteira.
Nesse artigo vamos fazer exatamente isso: colocar um vídeo como background de um elemento qualquer (tela inteira) utilizando apenas HTML5 e CSS.
Exemplo de vídeo como background em HTML e CSS
Você pode ver um exemplo do que vamos fazer no link abaixo:
Você também pode baixar o exemplo acima no link abaixo:
Então vamos lá…
O vídeo
Antes que você comece a colocar a mão na massa, deve saber algumas coisas sobre o vídeo que você vai colocar como background no seu código.
Primeiramente, você tem que ter pelo menos dois formatos do vídeo que deseja utilizar, um em MP4 e outro em WebM. Para entender o motivo basta ler sobre vídeos em HTML5 na W3Schools.
Normalmente utilizo o Adobe Premiere para editar e exportar os vídeos que utilizo, no entanto, ele não exporta WebM por padrão. Se você também utiliza o Adobe Premiere, existe um plugin que faz o serviço por você.
Não vou entrar muito em detalhes sobre edição e exportação de vídeos aqui, pois isso foge ao escopo do artigo, mas, se você tiver alguma dúvida e quiser perguntar, basta deixar um comentário; se soubermos, ajudaremos.
Para este tutorial vamos utilizar apenas os dois formatos mencionados anteriormente.
Seu vídeo vai ficar em loop (executando sem parar), portanto, tente encontrar algo que não seja cansativo ou estressante. Um vídeo de cerca de 15 segundos é o suficiente.
Não se esqueça de remover o áudio do vídeo, isso vai lhe poupar algumas linhas de código para colocar o vídeo em mudo, caso você esqueça.
O HTML
O HTML não tem muito segredo, simplesmente utilize a tag de vídeo do HTML5, como manda a bula.
<video autoplay loop poster="images/torres.jpg" class="bg_video"> <source src="videos/bg.webm" type="video/webm"> <source src="videos/bg.mp4" type="video/mp4"> </video>
Depois disso, você pode fazer o que quiser com seu HTML, crie seus DIVs, sessions, articles ou o que desejar.
O CSS
Agora você precisa colocar um CSS na classe do seu vídeo. É exatamente isso que vai deixá-lo parecido com um background.
Vamos garantir que o elemento tenha posição fixa, largura e altura mínimas de 100%, nenhuma distância da margem da janela.
Veja como fica:
.bg_video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
background: url(images/torre.jpg) no-repeat;
background-size: cover;
}
A imagem de background é um fallback para os navegadores que não suportam vídeo em HTML5. Lembre-se de colocar uma imagem que seja atrativa, pois, ainda existem muitos navegadores que não suportam vídeo.
O HTML e CSS completos
Se você quiser copiar e colar no seu editor de textos para testar, segue abaixo o código completo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Background Video - Torre Eiffel - TutsUP</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html{
width: 100%;
height: 100%;
font-family: sans-serif;
font-size:22px;
line-height: 1.3;
}
.bg_video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
background: url(images/torre.jpg) no-repeat;
background-size: cover;
}
.body{
padding:20px;
background: rgba(255,255,255,0.9);
margin: 30% auto 20px auto;
max-width: 960px;
border-radius: 10px;
}
.body h1{
font-family: Georgia, serif;
font-size:40px;
}
.body p{
margin: 1.6em 0;
}
</style>
</head>
<body>
<video autoplay loop poster="polina.jpg" class="bg_video">
<source src="videos/bg.webm" type="video/webm">
<source src="videos/bg.mp4" type="video/mp4">
</video>
<div class="body">
<h1>Torre Eiffel</h1>
<p>Seu texto!</p>
</div>
</body>
</html> Concluindo
Tenha cautela em utilizar esse tipo de tática, um vídeo pode pesar muito o seu layout caso não tenha sido codificado adequadamente. Não o utilize se não for extremamente necessário para seu layout.
No demais, essa tática funciona perfeitamente com os navegadores mais novos.
Em caso de dúvidas, só comentar aí abaixo.
