Fundos de vídeo em tela cheia chamam a atenção instantaneamente. Eles transformam um site WordPress simples em algo que parece polido, moderno e profissionalmente projetado.
No geral, vimos o quanto um fundo de vídeo bem posicionado pode melhorar as primeiras impressões e manter os visitantes engajados.
A boa notícia é que você não precisa de software especial ou desenvolvimento personalizado. Você pode até usar vídeos do YouTube que já possui, o que o torna uma maneira acessível de adicionar movimento e personalidade às suas páginas.
Neste guia, mostraremos as maneiras mais fáceis de adicionar um vídeo do YouTube como fundo do seu WordPress usando ferramentas fáceis para iniciantes.
💡 Resposta Rápida: Como Adicionar um Fundo de Vídeo em Tela Cheia no WordPress
Se você deseja um fundo de vídeo em tela cheia em seu site WordPress, existem algumas opções fáceis, dependendo da sua configuração e preferências:
- Método 1: Advanced WordPress Backgrounds (Grátis) – Use este plugin se você quiser uma solução simples e gratuita para adicionar um fundo de vídeo do YouTube em tela cheia.
- Método 2: Thrive Architect (Recomendado) – Melhor para usuários que desejam controle total e fácil personalização com um construtor de páginas. É ideal para criar cabeçalhos de vídeo visualmente impressionantes rapidamente.
- Alternativa: SeedProd Fundos Animados – Use isso se você preferir um fundo animado leve em vez de um vídeo, o que pode economizar largura de banda e melhorar a velocidade da página.
Por que usar um vídeo do YouTube como fundo em tela cheia?
Usar um vídeo do YouTube como plano de fundo em tela cheia é uma maneira poderosa de capturar a atenção dos visitantes imediatamente e mantê-los engajados em seu site.
Aqui estão os benefícios:
- Mantenha Tempos de Carregamento de Página Rápidos: Incorporar um vídeo do YouTube em vez de fazer upload do seu próprio vídeo mantém seu site leve, o que é importante para a experiência do usuário e SEO.
- Engaje Visitantes Instantaneamente: Um plano de fundo de vídeo em movimento pode capturar a atenção nos primeiros segundos de uma visita.
- Destaque-se da Concorrência: Cria um visual atraente e moderno que diferencia seu site.
- Economize Largura de Banda e Armazenamento: Hospedar vídeos no WordPress pode consumir muitos recursos do servidor e exigir armazenamento extra.
No WPBeginner, recomendamos fortemente incorporar vídeos do YouTube em vez de fazer upload deles diretamente para o WordPress. Essa abordagem permite que você exiba conteúdo envolvente sem diminuir a velocidade do seu site ou sobrecarregar desnecessariamente seu plano de hospedagem.
Dito isso, vamos ver como você pode 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 estes links rápidos para navegar entre eles:
- Método 1: Use o Advanced WordPress Backgrounds para Plano de Fundo de Vídeo em Tela Cheia (Grátis)
- Método 2: Use o Thrive Architect para Adicionar um Plano de Fundo de Vídeo em Tela Cheia (Recomendado)
- Alternativa: Adicione um Plano de Fundo Animado no WordPress com SeedProd
- Perguntas Frequentes Sobre Planos de Fundo de Vídeo
Método 1: Use o Advanced WordPress Backgrounds para Plano de Fundo de Vídeo em Tela Cheia (Grátis)
Se você está procurando uma maneira gratuita e fácil de adicionar planos de fundo de vídeo, então você pode usar o Advanced WordPress Backgrounds.
Este plugin 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, incluindo vídeos do YouTube.
Primeiro, você precisará instalar e ativar o plugin no seu painel do WordPress. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, basta ir para a página ou post onde você deseja adicionar um vídeo do YouTube como plano de fundo em tela cheia. No editor de blocos Gutenberg, clique no botão ‘+’ para adicionar um bloco.
No 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 abas para os diferentes tipos de planos de fundo de largura total que você pode criar: Cor, Imagem e Vídeo.
Como você deseja adicionar um vídeo do YouTube, clique na aba ‘Vídeo’. Depois disso, escolha a aba ‘YouTube / Vimeo‘.
Agora você pode copiar e colar o URL do arquivo de vídeo do YouTube que deseja usar no seu blog WordPress.
Agora, o editor de blocos do WordPress mostrará uma prévia de como este fundo ficará.
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 no momento.
Por padrão, o fundo de 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 controle deslizante ‘Ativar em dispositivos móveis’.
Apenas lembre-se de que planos de fundo de vídeo podem consumir a bateria e os dados de usuários móveis.
Por padrão, o bloco reproduzirá o vídeo completo do YouTube em reprodução automática e em loop.
Outra opção é reproduzir uma parte específica do vídeo digitando os tempos exatos (em segundos) nas caixas 'Hora de Início' e 'Hora de Fim'.
Você também pode impedir que o vídeo seja reproduzido em loop desativando o controle deslizante ‘Loop’.
💡Importante: Certifique-se de que seu vídeo esteja mudo ou não tenha som, pois muitos navegadores bloqueiam a reprodução automática de vídeos com áudio ativado.
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, geralmente você desejará deixar o controle deslizante ‘Sempre reproduzir’ desativado.
Quando você adiciona o vídeo pela primeira vez, ele é exibido com 100% de opacidade, tornando-o totalmente visível. Sinta-se à vontade para arrastar o controle deslizante 'Opacidade da Imagem' para tornar o plano de fundo do vídeo do YouTube mais sutil.
Se você experimentar com a opacidade, talvez também queira tentar adicionar uma sobreposição colorida.
Simplesmente clique para expandir a seção ‘Cor da Sobreposição’ e, em seguida, use as configurações para criar diferentes sobreposições coloridas.
Sinta-se à vontade para explorar outras configurações, como o efeito parallax e o espaçamento, para que o plano de fundo fique exatamente como você deseja.
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 links, textos e imagens.
Para começar, clique no ícone ‘+’ no meio do bloco Plano de Fundo (AWB).
Isso abre um pop-up onde você pode escolher o bloco que deseja adicionar. O plugin Advanced WordPress Backgrounds funciona com todos os blocos padrão do WordPress, para que você possa adicionar qualquer conteúdo que desejar.
Se você adicionar texto sobre o bloco, apenas certifique-se de alterar a cor do texto para que complemente bem o fundo do vídeo.
Quando estiver satisfeito com o resultado, basta clicar no botão 'Atualizar' ou 'Publicar' para tornar a página ativa. Agora, se você visitar seu site WordPress, verá o fundo de vídeo em ação.
Método 2: Use o Thrive Architect para Adicionar um Plano de Fundo de Vídeo em Tela Cheia (Recomendado)
Se você deseja personalizar totalmente o plano de fundo do seu vídeo ou criar páginas completas facilmente, este método é para você.
Para isso, você precisará do Thrive Architect.
Após testes completos, descobrimos que é um plugin construtor de páginas super fácil de usar. Além de um recurso de fundo de vídeo, ele possui uma funcionalidade de arrastar e soltar flexível de usar, para que você possa criar o site que deseja sem complicações.
Além disso, ele vem com modelos de landing page inteligentes otimizados para conversões, para que sua landing page esteja configurada para o sucesso desde o início.
Para mais informações sobre o Thrive Architect, você pode ler nossa análise do Thrive Architect.
Observação: Não é fã do Thrive Architect? Você também pode usar o construtor de páginas SeedProd para adicionar um fundo de vídeo em tela cheia do YouTube. Saiba mais sobre a ferramenta em nossa análise do SeedProd.
Se você quiser usar este método, vá em frente e compre um plano do Thrive Architect primeiro. Ele está disponível para compra como um produto independente ou como parte do pacote Thrive Themes.
Em seguida, basta instalar o plugin. Você pode conferir nosso guia sobre como instalar um plugin do WordPress para mais informações.
Depois disso, você pode ir em ‘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 Thrive Architect’.
Em seguida, clique no botão ‘+’ no lado direito da página e encontre o elemento Seção de Fundo.
Basta clicar nele para adicioná-lo à página.
Neste ponto, você pode navegar para o lado esquerdo da página e rolar para baixo até a seção Estilo de Fundo.
Aqui, basta ativar o alternador 'Fundo de vídeo' e selecionar 'YouTube' para a Origem.
Depois disso, vá para o vídeo do YouTube que você deseja usar como fundo em tela cheia.
Basta copiar o URL do vídeo do YouTube assim:
💡Dica Profissional: Certifique-se de que o vídeo escolhido não tenha anúncios ativados. Caso contrário, um anúncio pode aparecer e cobrir o conteúdo do seu plano de fundo.
Em seguida, cole o URL na seção apropriada.
Agora você deve ver o fundo na tela.
Embora o fundo seja adicionado, ele ainda não está em tela cheia.
Para garantir que esteja em tela cheia, você precisa rolar para cima até a seção Opções Principais. Em seguida, ative as opções 'Conteúdo cobre toda a largura da tela', 'Ajustar altura à tela' e 'Esticar para ajustar a largura da tela'.
Vamos explorar mais algumas opções. Para adicionar conteúdo ao seu fundo, tudo o que você precisa fazer é clicar no botão '+' no lado direito novamente e arrastar e soltar um elemento.
Você pode adicionar textos, imagens, formulários, botões, depoimentos e mais. O Thrive Architect tem dezenas de elementos focados em conversão que você pode aproveitar para o seu site.
Se você acha que a cor de fundo não contrasta bem o suficiente com o texto, basta voltar às configurações da seção de Fundo.
Em seguida, role para baixo até Estilo de Fundo novamente e, na opção 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 ‘Aplicar’.
Outra coisa que você pode ajustar nas configurações da Seção de Fundo é o Comportamento de Rolagem. Você pode escolher se deseja torná-lo estático, fixo ou parallax.
Recomendamos apenas mantê-lo estático para que o fundo não se mova enquanto o usuário rola para baixo. Caso contrário, o vídeo continuará tocando, o que pode deixar seu site lento.
A próxima coisa que você pode fazer é ir para a seção Responsivo. Aqui, você pode escolher se deseja que o fundo do vídeo apareça nas versões para celular e tablet do seu site.
Depende de você, mas lembre-se de que os vídeos levam um tempo para carregar. Pode ser irritante para seus visitantes esperar que eles rodem quando estão em um dispositivo de tela pequena.
Quando estiver satisfeito com o fundo de vídeo do YouTube em tela cheia, simplesmente clique no botão ‘Salvar Trabalho’ para salvar suas alterações.
É isso!
Agora, vá para o seu site WordPress para ver como ele fica ao vivo.
Veja como nossa página de teste fica.
Alternativa: Adicione um Plano de Fundo Animado no WordPress com SeedProd
Embora os planos de fundo em vídeo possam ser visualmente atraentes, eles também podem diminuir a velocidade de carregamento do seu site. Se você deseja uma alternativa, pode adicionar um plano de fundo animado em vez disso.
A melhor maneira de fazer isso é com o SeedProd, um poderoso plugin construtor de páginas com arrastar e soltar para WordPress.
Ele permite que você adicione facilmente planos de fundo animados impressionantes ao seu site usando particle.js. Particle.js é uma biblioteca JavaScript leve que cria animações interativas de partículas.
Para mais informações, você pode conferir nosso guia sobre como adicionar um plano de fundo animado no WordPress.
Dica Bônus: Adicione um Feed de Vídeo do YouTube no WordPress
Você quer adicionar mais vídeos ao seu site? Embora o WordPress tenha blocos de incorporação de vídeo integrados, 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.
Na nossa opinião, é o melhor plugin de galeria do YouTube no mercado que exibe automaticamente todos os vídeos mais recentes do seu canal do YouTube, para que seus visitantes sempre vejam o conteúdo mais novo.
Simplesmente crie um feed do YouTube usando o editor fácil do Smash Balloon e, em seguida, adicione-o a qualquer página ou postagem usando um shortcode ou o bloco pronto do plugin.
Você também pode usar o Smash Balloon para incorporar playlists do YouTube, favoritos e transmissões ao vivo 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 integrado do plugin garantirá que seu site sempre carregue rapidamente, o que é ótimo para SEO.
Para mais detalhes, você pode ver nosso guia passo a passo sobre como exibir os vídeos mais recentes de um canal do YouTube no WordPress.
Perguntas Frequentes Sobre Planos de Fundo de Vídeo
Aqui estão algumas perguntas que nossos leitores frequentemente fizeram sobre como adicionar fundos de vídeo no WordPress:
Como coloco um vídeo do YouTube em tela cheia?
Para colocar um vídeo do YouTube em tela cheia, clique no ícone de tela cheia no canto inferior direito do player do YouTube, ou use o atalho de teclado f enquanto o vídeo estiver ativo.
Como adicionar um fundo de vídeo no WordPress?
Você pode adicionar um fundo de vídeo através de um plugin ou de um construtor de páginas como o Thrive Architect. Para vídeos do YouTube, o embedding é recomendado para evitar lentidão no seu site.
Que tipo de vídeos do YouTube devo escolher como fundo?
Recomendamos escolher um vídeo visualmente envolvente que seja sutil o suficiente para não distrair do seu conteúdo principal. Clipes curtos em loop com movimento suave geralmente funcionam melhor.
Esperamos que este tutorial 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 viral de lista de espera com o WordPress e nossas escolhas de especialistas para os melhores construtores de temas do WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Mrteesurez
Este é um recurso empolgante. Ele pode fazer com que os usuários permaneçam mais tempo em um site e lhes dê uma aparência mais atraente ao visualizarem a cena reproduzida em segundo plano.
Desde que isso não distraia a atenção dos usuários ou diminua a velocidade de um site. Isso diminuirá a taxa de rejeição do seu site, pois os usuários tenderão a permanecer mais tempo.
Notei isso em alguns blogs como Createandgo e alguns outros blogs assim. Obrigado por compartilhar este artigo.
Moinuddin Waheed
Esta é uma ideia muito simples, mas poderosa, para capturar a atenção dos visitantes, reproduzindo algo em segundo plano.
Eu a usei com construtores de páginas e nunca soube que um método simples diretamente do Gutenberg também estava disponível para uso.
É especialmente útil para páginas de destino e de vendas, o que torna intuitivo para os visitantes interagirem com o botão de chamada para ação.
Obrigado por ilustrar os passos simples.
Mrteesurez
Pessoalmente, achei essa técnica incrivelmente eficaz, especialmente para páginas de destino e de vendas. Para mim, eu costumava usar o Elementor para isso, aprender que isso pode ser feito diretamente através do Gutenberg é um conhecimento adicional para mim.
THANKGOD JONATHAN
Eu tenho um vídeo carregado na minha biblioteca do Wordpress e tenho pensado em torná-lo como um vídeo de fundo no meu blog.
Por favor, como faço isso corretamente para que não afete a velocidade do meu site? Ou devo carregá-lo no YouTube e depois incorporá-lo no meu site?
WPBeginner Support
Não recomendamos o upload de vídeos diretamente em seu site WordPress, você pode ver nossos motivos em nosso guia abaixo!
https://www.wpbeginner.com/beginners-guide/why-you-should-never-upload-a-video-to-wordpress/
Admin
Ralph
Quero usá-lo como fundo para minha página de portfólio/contato comercial, mas isso diminui a velocidade do site em si, ou ele carrega diretamente do YouTube e não diminui a velocidade do site em si?
Os comentários anteriores são antigos, mas ainda preocupantes.
WPBeginner Support
Os vídeos devem carregar como um embed do YouTube, o que não deve causar uma lentidão em seu site.
Admin
Jiří Vaněk
Eu não deveria me preocupar com a lentidão do próprio site. O problema aqui reside principalmente na conectividade lenta e nos dados nesses dispositivos. O primeiro problema surge com celulares que não têm conectividade forte. Ele ficará lento, parecerá pouco profissional e talvez leve o usuário a sair. O segundo problema é que, se alguém tiver um plano de dados limitado, reclamará de quanta informação uma página dessas consome. Pessoalmente, eu provavelmente evitaria isso.
Jiří Vaněk
Posso aprender algo novo novamente com o Gutenberg. Eu sempre soube fazer isso apenas no Elementor, onde adicionar um fundo de vídeo é realmente simples. Agora eu sei como fazer isso fora do Elementor também.
WPBeginner Support
Glad we could share the process
Admin
T_Lind
Ótimo artigo!
Mas eu não consigo adicionar o fundo de vídeo a uma única página, como você descreve. Eu só consigo adicionar um vídeo do YouTube à minha página inicial, o que limita a extensão em que o aplicativo pode ser usado.
Ideias?
Tobi
Olá, este plugin foi um desastre para o meu site.
Ele consumiu todos os recursos e por horas fiquei no telefone com minha empresa de hospedagem tentando descobrir por que eu estava recebendo os erros nas capturas de tela abaixo:
Depois de horas, finalmente rastreamos os erros até o plugin que instalei recentemente.
Tivemos que removê-lo do gerenciador de arquivos e tudo voltou ao normal agora.
Ele consome muitos recursos, a menos que você tenha uma conta de hospedagem super, eu não aconselho.
WPBeginner Support
Olá Tobi,
O plugin não deveria consumir muitos recursos porque ele carrega vídeos do YouTube, não do seu site. A primeira captura de tela que você compartilhou aponta para um erro de conexão com o banco de dados. Esperamos que tudo funcione bem para você agora, no entanto, se você ainda vir problemas em seu site, então é muito provável que seja um problema de hospedagem.
Admin
Mike
Funciona com Avada?
Carlos Leon
Ele reproduz em celulares?