Olá Galera do bem, hoje vou passar uma dica para quem quer usar vídeo no fundo do site.
Acreditem .. muito fácil de fazer.
Mas é muito importante tomar as seguintes precauções:
1) Utilize um vídeo sem som caso não queira que o som do vídeo saia no site
2) Procure não utilizar vídeos em que que não ocupem toda a área do vídeo, tipo com laterais pretas.
3) Procure você mesmo postar o vídeo, uma vez que só você pode tirar ele do ar.
4) Não utilize vídeos com monetização e se você postar não configure monetização para o vídeo
5) Não utilize vídeos muito grandes como fiz no exemplo, pesa o site
Então vamos la:
Acesse o vídeo desejado no youtube.
Para este exemplo escolhi este o vídeo deste link: https://www.youtube.com/watch?v=rBQBry65KcA
Como todos sabem o código do vídeo é a sequência de caracteres após o v= da url.
No caso do vídeo do exemplo é rBQBry65KcA
O código que vamos utilizar no head do site é o abaixo:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="1280" height="720" src="https://www.youtube.com/embed/codigodovideo?rel=0&autoplay=1&volume=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</script>
<style type="text/css">
videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
Agora substitua o trecho em vermelho pelo código do vídeo desejado. No caso deste exemplo ficou assim:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="1280" height="720" src="https://www.youtube.com/embed/rBQBry65KcA?rel=0&autoplay=1&volume=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</script>
<style type="text/css">
videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
No Webacappella na opção SITE>>PROPRIEDADES DO SITE, clique na CATRACA e adicione o código no primeiro campo:
Agora faça seu site sem adicionar nenhum fundo, pois o vídeo será o próprio fundo do site.
