Como adicionar um vídeo do YouTube como plano de fundo em tela cheia no WordPress

Às vezes, tentamos adicionar novas maneiras de tornar nossos sites WordPress mais envolventes e visualmente atraentes, e uma delas é adicionar um vídeo do YouTube como plano de fundo em tela cheia.

Quando usados adequadamente, os vídeos em segundo plano podem aumentar significativamente o envolvimento do visitante e o tempo gasto em uma página. Também achamos que eles são uma ótima maneira de chamar a atenção dos visitantes instantaneamente e criar uma primeira impressão memorável.

Neste artigo, mostraremos como adicionar um vídeo do YouTube como plano de fundo em tela cheia no seu site WordPress.

Por que usar um vídeo do YouTube como plano de fundo em tela cheia?

Um fundo de vídeo envolvente e atraente em seu cabeçalho é uma ótima maneira de fazer com que os visitantes permaneçam em seu site. Quando os visitantes chegam ao seu site WordPress pela primeira vez, você tem apenas alguns segundos para chamar a atenção deles.

Atualmente, muitos temas diferentes do WordPress oferecem suporte a fundos de vídeo. No entanto, carregar e hospedar conteúdo de vídeo no WordPress pode exigir muita largura de banda.

Dependendo do seu plano de hospedagem do WordPress, você pode até ter que comprar armazenamento extra.

Na WPBeginner, é altamente recomendável não carregar seus vídeos no WordPress.

Em vez disso, você pode usar um serviço como o YouTube e incorporar o vídeo como plano de fundo do seu site WordPress. Dessa forma, você pode se destacar dos seus concorrentes sem tornar o site mais lento e afetar a experiência do usuário.

Dito isso, vamos ver como é possível adicionar um vídeo do YouTube como plano de fundo em tela cheia no seu site WordPress. Mostraremos dois métodos, e você pode usar esses links rápidos para navegar entre eles:

Método 1: Use Advanced WordPress Backgrounds for Fullscreen Video Background (gratuito)

Se você estiver procurando uma maneira fácil e gratuita de adicionar fundos de vídeo, poderá usar o Advanced WordPress Backgrounds.

Esse plug-in gratuito adiciona um bloco de plano de fundo que permite criar um plano de fundo em tela cheia usando qualquer cor, imagem ou vídeo, inclusive vídeos do YouTube.

Primeiro, você precisará instalar e ativar o plug-in no painel do WordPress. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, basta ir até a página ou postagem em que deseja adicionar um vídeo do YouTube como plano de fundo em tela cheia. No editor de blocos do Gutenberg, vá em frente e clique no botão “+” adicionar bloco.

Na janela pop-up que aparece, comece a digitar “Background AWB”. Quando o bloco correto aparecer, clique nele para adicioná-lo à página.

No menu do lado esquerdo, você verá três guias para os diferentes tipos de planos de fundo de largura total que podem ser criados: Cor, Imagem e Vídeo.

Como você deseja adicionar um vídeo do YouTube, clique na guia “Video” (Vídeo). Depois disso, escolha a guia“YouTube / Vimeo“.

Agora você pode copiar e colar o URL do arquivo de vídeo do YouTube que deseja usar em seu blog do WordPress.

Agora, o editor de blocos do WordPress mostrará uma prévia de como esse plano de fundo ficará.

O Advanced WordPress Backgrounds altera o tamanho do vídeo com base no conteúdo que você adiciona a ele, portanto, não se preocupe se o vídeo parecer um pouco pequeno no momento.

Por padrão, o plano de fundo do vídeo é desativado em dispositivos móveis.

No entanto, se você quiser mostrar o plano de fundo do vídeo em dispositivos móveis, clique para ativar o botão de alternância “Ativar em dispositivos móveis”.

Quando sai da caixa, o bloco reproduzirá o vídeo inteiro do YouTube em reprodução automática e em loop.

Outra opção é reproduzir uma parte específica do vídeo digitando os horários exatos nas caixas “Start Time” (Hora de início) e “End Time” (Hora de término).

Você também pode impedir que o vídeo seja reproduzido em um loop desativando o botão de alternância “Loop”.

Por padrão, o vídeo só será reproduzido quando o visitante puder vê-lo em seu navegador. Isso ajudará a manter o desempenho do seu site, portanto, é recomendável deixar a opção “Always play” desativada.

Quando você adiciona o vídeo pela primeira vez, ele é exibido com 100% de opacidade, portanto, parece sólido. Sinta-se à vontade para arrastar o controle deslizante “Image Opacity” (Opacidade da imagem) para tornar o plano de fundo do vídeo do YouTube mais sutil.

Se você experimentar a opacidade, também poderá tentar adicionar uma sobreposição colorida.

Basta clicar para expandir a seção “Overlay Color” e usar as configurações para criar sobreposições de cores diferentes.

Sinta-se à vontade para explorar outras configurações, como o efeito de paralaxe e o espaçamento, para que o plano de fundo tenha a aparência exata que você deseja.

Quando você estiver satisfeito com a configuração do plano de fundo do vídeo do YouTube, é hora de começar a adicionar conteúdo, como links, textos e imagens.

Para começar, clique no ícone “+” no meio do bloco Background (AWB).

O plug-in Advanced WordPress Backgrounds funciona com todos os blocos padrão do WordPress, portanto, você pode adicionar qualquer conteúdo que desejar.

Se você adicionar texto na parte superior do bloco, não se esqueça de alterar a cor do texto para que ele combine bem com o plano de fundo do vídeo.

Quando estiver satisfeito com a aparência, basta clicar no botão “Update” (Atualizar) ou “Publish” (Publicar) para tornar a página ativa. Agora, se você visitar o site do WordPress, verá o fundo de vídeo em ação.

Método 2: Use o Thrive Architect para adicionar um fundo de vídeo em tela cheia (recomendado)

Se você deseja personalizar totalmente o vídeo de fundo em tela cheia ou até mesmo projetar facilmente todas as páginas do seu site, esse método é para você.

A melhor maneira de adicionar um vídeo do YouTube como plano de fundo em tela cheia é com o Thrive Architect.

O Thrive Architect é um plugin construtor de páginas fácil de usar, criado para iniciantes. Além de um recurso de plano de fundo de vídeo, ele tem a funcionalidade de arrastar e soltar, que é flexível de usar, para que você possa criar o site que quiser sem problemas.

Além disso, ele vem com modelos de página de destino inteligentes que são otimizados para conversões, de modo que sua página de destino está preparada para o sucesso desde o início.

Para obter mais informações sobre o Thrive Architect, leia nossa análise do Thrive Architect.

Se você quiser usar esse método, vá em frente e compre um plano do Thrive Architect primeiro. Ele está disponível para compra como um produto autônomo ou como parte do pacote Thrive Themes.

Em seguida, basta instalar o plug-in. Para obter mais informações, consulte nosso guia sobre como instalar um plug-in do WordPress.

Depois disso, você pode ir para “Pages” (Páginas) na área de administração do WordPress e selecionar uma página para editar. Passe o mouse sobre a página e escolha “Editar com o Thrive Architect”.

Em seguida, clique no botão “+” no lado direito da página e localize o elemento Background Section.

Basta clicar nele para adicioná-lo à página.

Nesse ponto, você pode navegar para o lado esquerdo da página e rolar para baixo até a seção Background Style (Estilo do plano de fundo).

Aqui, basta ativar o botão de alternância “Video background” e selecionar “YouTube” como fonte.

Depois disso, vá para o vídeo do YouTube que deseja usar como plano de fundo em tela cheia.

Basta copiar o URL do vídeo do YouTube dessa forma:

Em seguida, cole o URL na seção apropriada.

Agora você deve ver o plano de fundo na tela.

Embora o plano de fundo tenha sido adicionado, ele ainda não está em tela cheia.

Para certificar-se de que está em tela cheia, é necessário rolar para cima até a seção Main Options (Opções principais). Em seguida, ative as opções “Content covers entire screen width” (O conteúdo cobre toda a largura da tela), “Match height to screen” (Corresponder a altura à tela) e “Stretch to fit screen width” (Esticar para caber na largura da tela).

Vamos explorar mais algumas opções. Para adicionar algum conteúdo ao plano de fundo, basta clicar novamente no botão “+” no lado direito e arrastar e soltar um elemento.

Você pode adicionar textos, imagens, formulários, botões, depoimentos e muito mais. O Thrive Architect tem dezenas de elementos voltados para a conversão que você pode aproveitar em seu site.

Se você achar que a cor do plano de fundo não contrasta suficientemente bem com o texto, basta voltar às configurações da Seção de plano de fundo.

Em seguida, role para baixo até Background Style novamente e, na opção Add Layer (Adicionar camada), escolha uma cor sólida. Depois disso, você pode escolher uma cor para usar como filtro de fundo e ajustar a opacidade como desejar.

Quando terminar, basta clicar em “Apply” (Aplicar).

Outro aspecto que pode ser ajustado nas configurações da Seção de plano de fundo é o Comportamento de rolagem. Você pode escolher se deseja torná-la estática, fixa ou paralaxe.

Recomendamos mantê-lo estático para que o plano de fundo não se mova à medida que o usuário rola a tela para baixo. Caso contrário, o vídeo continuará sendo reproduzido, o que pode tornar seu site mais lento.

A próxima coisa que você pode fazer é ir para a seção Responsive (Responsivo). Aqui, você pode escolher se deseja que o plano de fundo do vídeo seja exibido nas versões para celular e tablet do seu site.

A decisão é sua, mas lembre-se de que os vídeos demoram um pouco para carregar. Pode ser irritante para os visitantes esperar que eles sejam executados quando estiverem em um dispositivo de tela pequena.

Quando estiver satisfeito com o plano de fundo do vídeo do YouTube em tela cheia, basta clicar no botão “Save Work” (Salvar trabalho) para salvar as alterações.

É isso aí!

Agora, acesse seu site do WordPress para ver como ele está funcionando.

Esta é a aparência de nossa página da Web de teste.

Alternativa: Adicionar um plano de fundo animado no WordPress

Embora os planos de fundo de vídeo possam ser visualmente atraentes, eles também podem reduzir a velocidade de carregamento do seu site. Se quiser uma opção alternativa, você pode adicionar um plano de fundo animado.

A melhor maneira de fazer isso é com o SeedProd, um poderoso plug-in de criação de páginas de arrastar e soltar para o WordPress.

Ele permite que você adicione facilmente fundos animados impressionantes ao seu site usando o particle.js. O Particle.js é uma biblioteca JavaScript leve que cria animações interativas de partículas.

Para obter mais informações, consulte nosso guia sobre como adicionar um plano de fundo animado no WordPress.

Dica bônus: Adicionar um feed de vídeo do YouTube no WordPress

Deseja adicionar mais vídeos ao seu site? Embora o WordPress tenha blocos de incorporação de vídeo incorporados, eles não são a maneira mais visualmente atraente de exibir vídeos, especialmente se você tiver vários deles.

É aí que entra o Smash Balloon YouTube Feed Pro.

O Smash Balloon YouTube Feed Pro é o melhor plug-in de galeria do YouTube do mercado. Ele mostra automaticamente todos os vídeos mais recentes de seu canal do YouTube, de modo que seus visitantes sempre verão o conteúdo mais recente.

Basta criar um feed do YouTube usando o editor fácil do Smash Balloon e, em seguida, adicioná-lo a qualquer página ou post usando um shortcode ou o bloco pronto do plug-in.

Você também pode usar o Smash Balloon para incorporar listas de reprodução, favoritos e transmissões ao vivo do YouTube em seu site WordPress.

A melhor coisa sobre o Smash Balloon é que ele não deixa seu site lento. O recurso de cache do YouTube incorporado ao plugin garantirá que seu site seja sempre carregado rapidamente, o que é ótimo para SEO.

Para obter mais detalhes, consulte nosso guia passo a passo sobre como exibir os vídeos mais recentes de um canal do YouTube no WordPress.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar um vídeo do YouTube como plano de fundo no WordPress. Talvez você também queira conferir nosso guia sobre como criar uma página de destino de lista de espera viral com o WordPress e nossas escolhas de especialistas para os melhores criadores de temas do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.