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

Vídeos são incríveis, eles fornecem mídia mais cativante e capturam mais emoções do que imagens.

Hoje em dia, mais e mais webmasters/marcas estão adotando a incorporação de vídeos como plano de fundo completo em seu site. Mas, a complexidade de incorporar o vídeo ao plano de fundo exige algum conhecimento técnico.

Para tornar tudo simples e ótimo para nossos leitores, vamos listar um plugin gratuito para incorporar vídeos em segundo plano e também passar por um tutorial detalhado de como incorporar vídeos em segundo plano com configurações simples.

Observação: é necessária alguma experiência em codificação para entender completamente o conteúdo. Sinta-se à vontade para fazer perguntas nos comentários, se algo parecer confuso.

Plugin para adicionar vídeo como plano de fundo de tela cheia no WordPress

Os plugins são ótimos, eles fornecem a funcionalidade necessária com poucos cliques. Vou listar alguns plugins antes de passar para o tutorial detalhado sobre como incorporar vídeos em segundo plano usando codificação.

1. mb .YTPlayer para vídeos em segundo plano

Um dos plugins de vídeo populares para integração em segundo plano. O plugin integra um player personalizado dentro do elemento da página.

Com o plugin, os usuários podem facilmente integrar os vídeos nas páginas e postar. A instalação é simples e o plugin gera um shortcode para facilitar a integração.

O plugin não suporta layout responsivo completamente.

Detalhes Completos e Download | Demonstração

2. Herói deslizante com efeitos de animação

O motivo do plugin é permitir que você incorpore fundo de vídeo no WordPress com efeitos deslizantes. O plugin oferece 11 animações de fundo, capacidade de adicionar música de fundo, integração de vídeo do YouTube e Vimeo, etc.

O plugin é compatível com qualquer tema ou editor do WordPress como o Gutenberg, por isso será responsivo e rápido em todos os sites do WordPress.

Detalhes Completos e Download | Demonstração

Agora, vem a parte real. A próxima parte requer codificação e funcionamento técnico da plataforma WordPress.

A incorporação de vídeo requer muitas etapas. Vamos percorrer os passos um por um. Depois de entender essas etapas, você pode entender como uma coisa simples pode se tornar complicada.

1. Usando Div para liberar espaço para o vídeo.

2. Obtenha o posicionamento Div no canto superior esquerdo da janela de visualização em absoluto ou fixo. O próximo passo é definir sua altura e largura para 100% e, em seguida, definir o z-index para 1. O Z-index define a profundidade do conteúdo.

3. Dimensionamento de vídeo div usando JavaScript.

4. A tela do monitor é redimensionada e novamente dimensiona o vídeo toda vez que o usuário dimensiona o vídeo.

5. Certifique-se de que o código funcione em diferentes navegadores e sistemas operacionais móveis.

Parece muita codificação, mas usaremos um plug-in personalizado simples para automatizar o processo de incorporação de vídeo ao plano de fundo da postagem ou das páginas do WordPress.

BGVIDEO: Baixar

Baixe o plugin e prossiga com uma instalação normal (assim como a instalação de outros plugins).

Este plugin simples funciona em conjunto com o shortcode e um shortcode chamado “bgvideo” está disponível no plugin. O shortcode funciona como um gateway para incorporar vídeo em qualquer página ou postagem.

Antes de prosseguir, precisamos alimentar alguns parâmetros para o shortcode para sua funcionalidade completa.

Os parâmetros são height, width, mp4, webm, ogg, autoplay, loop, muted e fixed. A altura e a largura referem-se à altura e à largura do vídeo, respectivamente. Os campos mp4, webm, ogg referem-se ao URL do respectivo formato de vídeo. É necessário que você forneça a URL de cada formato para que o vídeo seja executado em vários dispositivos sem nenhum problema.

Adicionando vídeos à biblioteca de mídia

A próxima etapa inclui adicionar vídeos à biblioteca de mídia. Certifique-se de adicionar todos os formatos (webm, ogg, mp4) na biblioteca de mídia.

Com a ajuda do bgvideo, os shortcodes do vídeo são transformados no bgvideo.

O shortcode do vídeo se parece com o abaixo

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video largura=”1280″ altura=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” largura=”1024″ altura=”576″ />

Não se esqueça de remover o sinal de porcentagem (%) na frente do código de acesso do vídeo e da tag de âncora.

Com a ajuda do bgvideo, o código acima se transformará no código abaixo

 [bgvideo largura="1280" altura="720" 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  poster="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  fixo="não"]

O plugin altera automaticamente o shortcode do vídeo para o shortcode bgvideo.

Tornando o vídeo transparente para o usuário

Com tudo configurado, você precisa fazer um pouco de mágica na propriedade CSS da página. O motivo é o fato do conteúdo da página dificultar a exibição do vídeo.

O CSS irá remover o conteúdo da página e deixar o vídeo brilhar para seus visitantes.

Insira o código CSS abaixo para fazer tudo funcionar bem.

#página{

fundo: nenhum;

}

Existem muitos outros ajustes necessários para configurar completamente o plano de fundo do vídeo.

Embrulhar

A melhor aposta para nossos leitores é usar um plugin completo e ignorar a parte de codificação - a parte de codificação só piorará as coisas se você não souber codificação. Você pode desviar a necessidade para seus desenvolvedores, mas isso não vem de graça.

Outra ótima solução alternativa é o uso de GIFs animados como plano de fundo. Existem duas razões que defendem o uso de GIFs animados. O primeiro é o uso de baixa largura de banda em comparação com o vídeo e o segundo é de fácil instalação. Outra grande vantagem é que você provavelmente não precisa se preocupar com questões de portabilidade e compatibilidade de outros dispositivos.

A animação pode ser facilmente formada usando o CSS ou carregada através da alteração normal do plano de fundo.

A complexidade do plano de fundo do vídeo é um pouco superior e a comunidade ou equipe principal do WordPress pode tomar nota disso e fazer alterações em seus próximos lançamentos.

Se você tem um vídeo e deseja converter para um gif, existem recursos on-line que podem fazer isso por você. Mas os GIFs convertidos não são otimizados e carregam muito peso com eles.

E quando você precisar fazer ajustes no vídeo que planeja incorporar, poderá encontrar alguns ótimos editores de vídeo gratuitos. Pode ser necessário cortar, recortar ou ampliar um vídeo, adicionar texto ou provavelmente ajustar o tema de cores para que ele corresponda ao estilo do seu site.

Se você estiver no Mac, naturalmente, você pode usar o iMovie porque ele já está pré-instalado no seu computador (se não, você pode obtê-lo gratuitamente). E se você estiver no Windows – o VSDC Free Video Editor é uma ótima escolha. Ele tem literalmente tudo o que você precisa, desde o conjunto básico de ferramentas de divisão/corte até a correção de cores e predefinições de estilo de vídeo. Além disso, é realmente poderoso quando se trata de formatos e você não precisará sacrificar a qualidade do arquivo de saída.

Você acha que eu perdi alguma coisa? Comente abaixo e deixe-nos saber.

*última atualização em 25/02/2019