Adicionar vídeo do Youtube como background de sua webpage

Uma das formas de se adicionar um vídeo do Youtube ao fundo de uma página de internet é utilizando o Tubular.

O jQuery Tubular é um plugin que permite com uma simples linha de código efetuar esta mágica. E este plugin só faz esta função e mais nada. Pega o vídeo indicado e injeta-o no fundo de uma página web ocupando todo o tamanho da tela, ajustando o tamanho do vídeo e fornecendo alguns controles básicos.

Outro ponto importante é que este plugin assume que seu layout de página já tem um simples elemento sob o body responsável por conter todo o website. Então obtido este elemento, o mesmo é promovido a z-index:99 e position:relative.

Depois, é adicionado um novo elemento, como position:fixed e z-index:1 que conterá um iframe com o conteúdo do Youtube.

$(identificador_elemento).tubular({opcoes});

Sendo que o identificardor_elemento deve ser apontar para um elemento que irá conter o vídeo. No nosso caso, como desejamos colocá-lo no background, o mesmo deve ocupar todo o fundo.

É importante reforçar que o Tubular não irá fazer qualquer alteração em seu layout, ou seja, o mesmo já deverá estar preparado para receber e apresentar o conteúdo, lembrando que elementos a frente do vídeo irão o tampar. Elementos transparentes ao contrário irão permitir uma maior integração.

As opcoes disponíveis são: ( Os valores apresentados são os valores padrões)
ratio: 16/9
videoId: ‘dRalLCoNsult’ // Identificador do vídeo do Youtube, em geral, vem após o v= no url
mute: true // Define se o vídeo deve ou não estar no mute
repeat: true // Define se o vídeo deve ser repetido desde de o início quando chegar ao seu final
width: $(window).width() // O comprimento do vídeo
wrapperZIndex: 99
playButtonClass: ‘tubular-play’ // CSS class do botão play
pauseButtonClass: ‘tubular-pause’ // CSS class do botão pause
muteButtonClass: ‘tubular-mute’ // CSS class do botão mute
volumeUpClass: ‘tubular-volume-up’ // CSS class do botão aumentar volume
volumeDownClass: ‘tubular-volume-down’ // CSS class do botão abaixar volume
increaseVolumeBy: 10 // Define o nível de incremento no volume. O volume vai de 1 a 100.
start: 0 // Posição inicial do vídeo em segundos

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: