Como adicionar um pop-up de vídeo no WordPress do YouTube ou Vimeo

Se você deseja apresentar vídeos em seu site WordPress, use um pop-up de vídeo para fazer isso com estilo! Um pop-up (também conhecido como sobreposição ou modal) chama a atenção para o conteúdo do vídeo. Em vez de ser reproduzido na página, o vídeo é colocado em primeiro plano, onde é o centro das atenções.

Você não pode simplesmente incorporar vídeos do YouTube?

Incorporar um vídeo do YouTube ou Vimeo em uma página WordPress é fácil. Graças ao recurso de “incorporação automática” do WordPress, tudo que você precisa fazer é colar o URL do vídeo no editor do WordPress. Quando você publicar a página ou postar, o vídeo aparecerá na página.

No entanto, existem algumas desvantagens nesse método. Se o visitante quiser aumentar o vídeo, a única opção é clicar no link “Assistir no YouTube”. Isso é bom para o YouTube, mas não tão bom para você. Isso afasta o visitante do seu site.

Talvez pior, a incorporação de vídeo cria uma conexão com o site de vídeo e carrega uma visualização. Isso aumentará o tempo necessário para carregar a página. Deveríamos estar fazendo tudo o que pudermos para diminuir tempos de carregamento da página, para não carregar coisas que não podem ser usadas.

Um pop-up de vídeo resolve esse problema. Usando o Pop-up de vídeo WP plugin, o vídeo abre por cima do resto do conteúdo da página. Não pode faltar. E não cria uma conexão com o site de vídeo até que o visitante abra o pop-up – chega de carregar elementos desnecessários da página.

O plugin nos permite exibir um vídeo pop-up quando o visitante clica em um “gatilho”. O gatilho pode ser um link, um botão, uma imagem – qualquer elemento ao qual você possa adicionar uma classe CSS.

Ler:  Revisão do BoldGrid: Este construtor de páginas WordPress é...

A versão pro do plugin também tem a opção de reproduzir o vídeo quando um visitante carrega uma página. A reprodução automática nem sempre é uma ótima experiência para o usuário (e Google não gosta disso). Portanto, vamos nos concentrar na criação de pop-ups que o seu visitante decida abrir.

Vamos instalar o plugin e aprender como abrir vídeos do YouTube e Vimeo.

Instalando o plugin WP Video Popup

Faça login no painel de administração do WordPress.

Na navegação da coluna esquerda, passe o mouse sobre o link “Plugins” e clique no link “Adicionar Novo”.

Na caixa “Pesquisar plug-ins…”, digite “WP Video Popup”.

Depois de localizar o plugin, clique no botão “Instalar agora”.

Clique no botão “Ativar”.

Usando WP Video Pop-up

Não há instalação ou configuração necessária para usar o plugin. Basta adicionar o shortcode a uma página ou postagem.

Este é o código de acesso:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup video=”link to YouTube or Vimeo video“][/ht_message]

É assim que fica o URL de um vídeo do YouTube:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

Então, vamos adicionar esse shortcode com a URL do vídeo a uma página. Abrirei a página de exemplo para edição e colarei o shortcode em um bloco de shortcode.

Se você não usa o editor WordPress Gutenberg, cole o shortcode na página usando o editor clássico.

O segundo passo é adicionar um acionar isso abrirá o vídeo. O gatilho é uma classe CSS (wp-video-popup) adicionada a um link, botão, imagem, etc.

Pode parecer incomum usar uma classe CSS para acionar uma ação, mas não é tão complicado quanto parece.

Usaremos um botão para acionar o pop-up.

Na seção “Opções para o acionador de vídeo” abaixo, mostrarei outras maneiras de acionar o pop-up. Além disso, como adicionar um gatilho usando o editor clássico do WordPress.

Adicione um bloco de botão e insira o texto do botão.

Ler:  Um guia rápido para desenvolvimento de back-end de aplicativos móveis

Agora enquanto o bloco de botões está abertorole para baixo até a seção “Avançado” na coluna da direita.

No campo “Classes CSS Adicionais”, cole a classe do gatilho, wp-video-pop-up.

Salve a página e o botão será exibido.

Clique nele e o pop-up do vídeo entra em ação.

Para exibir um vídeo do Vimeo, as etapas são as mesmas. Basta usar um URL do Vimeo onde usamos o URL do YouTube acima.

Opções para o código abreviado do pop-up de vídeo

Existem algumas coisas úteis que você pode fazer com as opções de shortcode.

Mudo

Você provavelmente não deseja silenciar o vídeo quando ele começa, mas em alguns casos, pode ser necessário. Alguns navegadores só reproduzirão automaticamente o vídeo se ele estiver sem som, então você deve decidir entre som ou reprodução automática.

Se o vídeo não for reproduzido automaticamente no navegador de sua escolha, tente adicionar a opção mudo ao seu código de acesso:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup mute=”1″ video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

Mostre vídeos do seu canal apenas em “Vídeos relacionados”

No final da maioria dos vídeos do YouTube, haverá uma exibição de vídeos relacionados. Você não pode desativar esse recurso, mas pode fazer com que ele mostre apenas vídeos do seu canal.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup hide-related=”1″ video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

Pular o início de um vídeo

Há ocasiões em que você desejará iniciar um vídeo em um determinado ponto do vídeo. Para fazer isso, adicione a opção inicial. O valor está em segundos, portanto, para iniciar um vídeo em um minuto, você inseriria 60.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup start=”24″ video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

Usando múltiplas opções

Você pode combinar as opções pop-up em um código de acesso.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup mute=”1″ start=”24″ video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

Ler:  Seis maneiras pelas quais a FromSoftware está dominando a indústria e como os desenvolvedores independentes podem aprender com elas

Opções para o gatilho de vídeo

Colocamos o gatilho do nosso pop-up de vídeo em um botão no exemplo acima. Mas também pode ser colocado em outros elementos.

Gatilho com texto

Qualquer seção de texto pode ser selecionada para vincular a um pop-up de vídeo.

Selecione o texto no editor.

Então, assim como fizemos com o botão, role para baixo até a seção “Avançado”.

No campo “Classes CSS Adicionais”, cole a classe do gatilho, wp-video-pop-up.

Agora salve a página.

Observe que você não está criando um link com este método. Portanto não haverá nenhuma indicação visual de que o texto seja um link. Você pode sublinhar o texto com HTML ou CSS para permanecer consistente com outros links em seu site.

Gatilho com uma imagem

Adicione uma imagem à sua página.

Então, como fizemos nos exemplos anteriores, role para baixo até a seção “Avançado”.

Cole a classe do gatilho, wp-video-pop-upno campo “Classes CSS adicionais”.

Salve a página.

Agora há uma imagem clicável em sua página que abrirá um pop-up de vídeo.

Novamente, não há indicação visual de que um visitante deva clicar na imagem. Você deve adicionar texto, uma legenda de imagem ou até mesmo algum tipo de texto “clique aqui” na própria imagem.

Como você sem dúvida notou, qualquer elemento ao qual você possa adicionar uma classe CSS pode ser um gatilho.

Configurando gatilhos no editor clássico do WordPress

O conceito é o mesmo; estamos adicionando uma classe CSS a um elemento. Mas isso é feito em diferentes lugares no editor clássico do WordPress.

Adicionando a classe CSS Trigger ao texto no Editor Clássico

Para adicionar CSS ao texto, temos que sair do editor Visual e ir para o editor de Texto

Agora vamos agrupar o texto que queremos para acionar o vídeo em uma tag span. Então:

Vamos criar um link para um pop-up de vídeo.

Ler:  Como ligar a TV Samsung sem controle remoto?

Isso se torna:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]Vamos criar um link para um pop-up de vídeo.[/ht_message]

Em seguida, adicionamos nossa classe de gatilho:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]class=”wp-video-popup”>Vamos vincular a um pop-up de vídeo.[/ht_message]

Publique a página e o texto acionará o pop-up do vídeo.

Adicionando a classe Trigger a um botão no Editor Clássico

Podemos adicionar a classe a um botão assim:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]class=”wp-video-popup”>Vamos vincular a um pop-up de vídeo.[/ht_message]

Adicionando a classe Trigger às imagens no Editor Clássico

Você não precisa mudar para o editor de texto para este.

Insira uma imagem em sua página e clique na imagem no editor.

Clique no ícone “Editar”.

No pop-up “Detalhes da imagem”, encontre a seção “Avançado” e insira a classe pop-up no campo “Classe CSS da imagem”.

Quando você salva a página, a imagem clicável estará lá.

Não se esqueça de adicionar texto ou alguma outra indicação de que a imagem é clicável.

O que acontece se você desinstalar o plug-in WP Video Popup

Se você desinstalar o plugin, páginas e postagens que usaram o plugin vai ser afetado. Os problemas incluem o seguinte:

  • Seu player pop-up do YouTube irá parar de funcionar.
  • Os códigos de acesso do plug-in irão parar de funcionar, então os próprios códigos de acesso serão exibidos em qualquer lugar em que foram usados.

Regras do vídeo, mostre-o

Expliquei como apresentar vídeo em um pop-up pode acelerar o carregamento da página e manter os visitantes em seu site. Usar o plugin WP Video Popup torna mais fácil adicionar um vídeo ao seu site da maneira certa. Esperançosamente, este tutorial irá inspirar você a adicionar um vídeo ao seu site WordPress.

Ou para adicionar mais!

Você já usou o recurso nativo de “incorporação automática” do WordPress? Se você passou da incorporação para os pop-ups, notou uma melhoria no desempenho? Deixe-me saber nos comentários.

Novas publicações:

Recomendação