Como adicionar vídeos do YouTube ou Vimeo de background

Nos meus projetos de freelance às vezes preciso adicionar um vídeo do YouTube ou Vimeo de background de uma seção.

Eu sempre acabo encontrando uma solução, mas dessa vez vou documentar a melhor que encontrei para não perder tanto tempo procurando de novo… 😅

Para começar, acesse o GitHub do script youtube-background criado pelo Stamat.

Baixe o arquivo jquery.youtube-background.min.js e adicione ao seu tema ou plugin. Caso precise de ajuda nessa parte, acesse meu tutorial sobre como adicionar JavaScript customizado no WordPress.

Nos meus testes, recomendo que crie uma <div> dentro de outra e ative o vídeo de fundo na <div> filho, com o pai com a declaração CSS de “position: relative” e “aspect-ratio: 16/9” (já que as dimensões dos vídeos do YouTube geralmente são 16/9).

Ao invés da propriedade “aspect-ratio” você também pode utilizar “padding-top” para maior compatibilidade com navegadores antigos. Caso tenha interesse em saber mais, acesse este tutorial.

Utilize o atributo [data-vbg] e cole a URL completa do vídeo do YouTube ou Vimeo.

Caso perceba que o vídeo está sendo cortado na parte de cima e de baixo, adicione o atributo [data-vbg-fit-box] como verdadeiro.

Confira um exemplo prático de código HTML, CSS e JavaScript (jQuery) para que o script funcione da forma que recomendo.

  <div class="container">
    <div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA" data-vbg-fit-box="true"></div>
  </div>
Code language: HTML, XML (xml)

.container {
  position: relative;
  aspect-ration: 16/9;
}
Code language: CSS (css)

jQuery(document).ready(function($) {
  $('[data-vbg]').youtube_background();
});
Code language: JavaScript (javascript)

Espero que com esse tutorial você consiga colocar os vídeos do YouTube e Video facilmente de background nas seções do seu projeto. Até a próxima! 😄