Colocar vídeo no fundo do Site – BigVideo.js

Por | Atualizado em 2015-05-11

Agora já é possível adicionar vídeos de fundo no seu site/ blog, bastando para isso usar o plugin jQuery BigVideo.js

O BigVideo.js utiliza o poder do HTML5, sendo muito simples de implementar. O BigVideo.js permite-lhe ainda criar uma “playlist” com vários vídeos diferentes.

Visualize a nossa página de demonstração: DEMO

Colocar vídeo no fundo do Site

Comece por aceder à página do BigVideo.js e faça o download das bibliotecas do plugin. Você irá necessitar igualmente das dependências jQuery, Video.js e jQuery.Ui. Você poderá baixar os exemplos do BigVideo.js (Examples), onde encontrará todos os arquivos necessários.

Agora, envie os arquivos do BigVideo.js para o seu servidor (incluindo o vídeo que irá utilizar). Caso não possua um servidor, poderá utilizar o Google Drive para hospedar os seus arquivos.

Por fim, chame as bibliotecas necessárias nas suas páginas HTML. Por exemplo:

<!-- BigVideo Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://www.seudominio/jquery/jquery.min.js"></script>')</script>
<script src="http://www.seudominio/jquery-ui/ui/jquery-ui.js"></script>
<script src="http://www.seudominio/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
<!-- BigVideo -->
<script src="http://www.seudominio.com/BigVideo/lib/bigvideo.js"></script>
<!-- Demo -->
<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('linkdovideo.mp4',{ambient:true});
});
</script>

Não se esqueça de alterar o link “www.seudominio.com”, pelo link do seu site, ou o site onde hospedou os arquivos. Por fim, faça o teste e confirme se tudo carrega corretamente.

Importante: Apesar dos vídeos de fundo concederem um visual muito atraente ao site, também o podem tornar mais “pesado”. Como tal, é importante ponderar antes de adicionar os vídeos de fundo.

Um comentário em “Colocar vídeo no fundo do Site – BigVideo.js

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *