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

Publicados: 2023-06-10

Você está procurando uma maneira de adicionar vídeos do YouTube como planos de fundo em tela cheia no WordPress?

Quando usados ​​com cuidado, os vídeos de plano de fundo podem atrair instantaneamente a atenção de um visitante e mantê-los em seu site. Isso os torna uma ótima opção para páginas de destino e páginas de vendas.

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

How to add YouTube video as fullscreen background in WordPress

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

Quando os visitantes acessam seu site WordPress pela primeira vez, você tem apenas alguns segundos para chamar a atenção deles e fazê-los permanecer.

Um fundo de vídeo envolvente e atraente é uma ótima maneira de manter os visitantes em seu site. Além disso, existem muitos temas WordPress diferentes que suportam fundos de vídeo.

No entanto, carregar e hospedar um vídeo no WordPress pode consumir muita largura de banda. Dependendo do seu plano de hospedagem WordPress, você pode até ter que comprar armazenamento extra.

Uma solução é adicionar um vídeo do YouTube como plano de fundo em tela cheia. Desta forma, você pode se destacar de seus concorrentes sem tornar seu site lento ou ocupar espaço extra.

Dito isso, vamos ver como você pode adicionar um vídeo do YouTube como plano de fundo em tela cheia em seu site WordPress.

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

A maneira mais fácil de adicionar um vídeo do YouTube como plano de fundo em tela cheia é usando o Advanced WordPress Backgrounds. Este plug-in adiciona um novo bloco de plano de fundo que permite criar um plano de fundo em tela cheia usando qualquer cor, imagem ou vídeo, incluindo vídeos do YouTube.

An example of a YouTube video background in WordPress

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

Após a ativação, basta ir para a página ou postar onde deseja adicionar um vídeo do YouTube como plano de fundo em tela cheia. Você pode então ir em frente e clicar no botão '+'.

No pop-up que aparece, comece a digitar 'Background AWB'. Quando o bloco certo aparecer, clique nele para adicioná-lo à página.

How to add a fullscreen video to a WordPress blog post or page

No menu à esquerda, você verá três guias para os diferentes tipos de fundos de tela cheia que você pode criar: Cor, Imagem e Vídeo.

Como você deseja adicionar um vídeo do YouTube, clique na guia 'Vídeo'.

Este plug-in permite usar um vídeo auto-hospedado como plano de fundo. No entanto, os vídeos ocupam muito espaço de armazenamento e largura de banda, portanto, você nunca deve enviar um vídeo para o WordPress.

Com isso dito, selecione a guia 'YouTube / Vídeo'.

How to add a YouTube video as a fullscreen background in WordPress

Agora, você precisará da URL do vídeo do YouTube que deseja usar em seu blog WordPress.

Em uma nova guia, basta acessar o vídeo e copiar o link na barra de endereços.

Getting the URL for a YouTube video

Feito isso, volte para o painel do WordPress e cole o URL na guia 'URL do vídeo'.

Agora, o editor de blocos do WordPress mostrará uma prévia de como ficará esse plano de fundo. O Advanced WordPress Backgrounds altera o tamanho do vídeo com base no conteúdo que você adiciona sobre ele, então não se preocupe se o vídeo parecer um pouco pequeno.

How to customize a YouTube background video in WordPress

Antes de começar a adicionar conteúdo, é uma boa ideia definir as configurações do plano de fundo.

Por padrão, o plano de fundo do vídeo está desativado em dispositivos móveis. Smartphones e tablets normalmente têm telas menores e menos poder de processamento em comparação com computadores de mesa. Pensando nisso, é uma boa ideia deixar o fundo do vídeo desativado no celular.

No entanto, se você quiser mostrar o plano de fundo do vídeo em dispositivos móveis, clique para ativar a opção 'Ativar em dispositivos móveis'.

Showing a YouTube background on mobile devices

Fora da caixa, o bloco reproduzirá todo o vídeo do YouTube em um loop.

Outra opção é reproduzir uma parte específica do vídeo digitando os horários exatos nas caixas 'Hora de início' e 'Hora de término'.

How to add a YouTube background video to a website

Você também pode interromper a reprodução do vídeo em loop desativando a opção 'Loop'.

Por padrão, o vídeo só será reproduzido quando o visitante puder vê-lo em seu navegador. Isso ajuda a aumentar a velocidade e o desempenho do seu WordPress, portanto, você normalmente deseja deixar a opção 'Sempre jogar' desativada.

Quando você adiciona o vídeo pela primeira vez, ele é mostrado com 100% de opacidade, então parece sólido.

Dependendo do design do seu site, você pode querer experimentar um fundo de vídeo semitransparente arrastando o controle deslizante 'Opacidade da imagem'. Esta pode ser uma maneira de criar um fundo de vídeo do YouTube mais sutil.

Changing the opacity settings for a YouTube video

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

Basta clicar para expandir a seção 'Cor da sobreposição' e, em seguida, usar as configurações para criar sobreposições de cores diferentes.

Adding an overlay to a video background

O plug-in Advanced WordPress Backgrounds oferece suporte a alguns efeitos de paralaxe diferentes. Essa é uma técnica moderna de web design em que o elemento de plano de fundo rola mais lentamente do que o conteúdo de primeiro plano, o que geralmente adiciona profundidade ao design da página.

Para experimentar os diferentes efeitos de paralaxe, clique para expandir a seção 'Paralaxe' e escolha uma opção no menu suspenso.

Adding parallax effects to a WordPress website

Depois de escolher um estilo de paralaxe, você terá acesso a algumas configurações extras nas quais poderá alterar a velocidade. Você também pode ativar e desativar o efeito de paralaxe em dispositivos móveis.

Da mesma forma, você pode experimentar diferentes efeitos de paralaxe do mouse, que fazem com que o plano de fundo role mais lentamente quando o visitante move o mouse.

Para dar uma olhada nessas configurações, clique para expandir a seção 'Mouse Parallax'.

Adding mouse parallax effects to a background video

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

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

Adding blocks to a YouTube background video

Isso abre um pop-up onde você pode escolher o bloco que deseja adicionar. O plug-in Advanced WordPress Backgrounds funciona com todos os blocos padrão do WordPress, para que você possa adicionar qualquer conteúdo que desejar.

Após configurar o primeiro bloco, basta clicar no botão '+' novamente e em seguida adicionar o próximo bloco que deseja utilizar.

Adding a RafflePress giveaway block to a video background

Simplesmente continue repetindo esse processo para criar o post ou o layout da página.

Quando estiver satisfeito com a aparência, clique no botão 'Atualizar' ou 'Publicar' para ativar a página. Agora, se você visitar seu site WordPress, verá o plano de fundo do vídeo em ação.

An example of a YouTube video background in WordPress

Bônus: Como adicionar um feed de vídeo do YouTube no WordPress

Um plano de fundo de vídeo pode atrair a atenção dos visitantes e, ao mesmo tempo, promover seu canal no YouTube. No entanto, se você realmente deseja obter mais visitantes e assinantes no YouTube, convém adicionar mais vídeos ao seu site.

É aí que entra o Smash Balloon.

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

Embedding a YouTube playlist using Smash Balloon

Basta criar um feed do YouTube usando o editor fácil do Smash Balloon e adicioná-lo a qualquer página ou postagem usando o 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.

Creating a YouTube feed using the Smash Balloon social media plugin

A melhor coisa sobre o Smash Balloon é que ele não deixa seu site lento. O recurso de cache do YouTube integrado ao plug-in garantirá que seu site sempre carregue rapidamente, o que é ótimo para SEO.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um vídeo do YouTube como plano de fundo no WordPress. Você também pode conferir nosso guia sobre como criar uma página de destino com o WordPress e nossas escolhas de especialistas para os melhores plug-ins de galeria de vídeos do YouTube.

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