Quer descobrir como abrir um vídeo do YouTube em um pop-up no WordPress?

La caixa de luz ou janela modal (pop-up) é um recurso muito comum na rede. No entanto, geralmente é usado para exibir imagens, formulários de captura de e-mail, promoções ou formulários de inscrição. 

Mas você sabia que ele também pode ser usado para exibir vídeos em WordPress ? Não? 

Não se preocupe, neste tutorial vou mostrar como exibir um vídeo. (YouTube - Vimeo - etc...) num caixa de luz.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog 

Então, voltemos ao porquê de estarmos aqui.

As razões pelas quais você deve usar um lightbox para exibir seus vídeos 

Os  caixa de luz São janelas modais; no entanto, o que você talvez não saiba é que nem todas as imagens exibidas nelas são carregadas durante todo o processo. "cobrança" página. 

Le navegador carregar : imagens quando o caixa de luz Quando o sistema abrir, o mesmo se aplica aos vídeos. Resumindo, é uma funcionalidade que permitirá que suas páginas abram mais rapidamente. Também permitirá reduzir o tamanho (comprimento) De sua páginaporque parte do conteúdo desta página estará disponível nesta janela modal.

Trégua de conversa, vamos ao que interessa.

Como instalar e configurar plug-in WP Video Lightbox

O WP Video Lightbox é um plug-in Disponível no WordPress.org. Isso significa que você pode instalá-lo diretamente do painel do WordPress, ou faça o download como um arquivo .zip.

Para mais detalhes, Confira nosso guia passo a passo sobre como instalar um plugin do WordPress..

Depois de ativar o plug-in, vá para a página de configurações deste local " configurações >> Vídeo caixa de luz ".

Iremos diretamente para o " foto bonita ".

Na realidade, isso plug-in use outro plug-in, destinado principalmente à exibição de uma galeria de fotos. Mas você pode alterar algumas das informações que serão aplicadas aos vídeos.

Para isso, vou explicar algumas opções (Obrigatório)De modo que é como você deseja.

Já a livraria foto bonita deve ser ativado (cheque « permitir foto bonita »). Para que os usuários saibam que estão na mesma página, você pode tornar a janela transparente. (definir um valor de 0 a 1. Valores de vírgula são aceitos).

Discover As características de um pop-up eficaz para WordPress 

Todas as suas caixas de luz podem ter um título que possa ser exibido (Mostrar título). Às vezes, para grandes janelas modais você precisa permitir o redimensionamento (Permitir redimensionar). E para vídeos mais longos, os usuários poderão aumentá-los (Permitir Expandir), Olhar melhor.

Para a largura e altura do caixa de luz, você pode editar os campos " omissão largura "E" omissão altura ". 

Para escolher o tema do caixa de luz, altere o menu suspenso tema Também é possível ativar a reprodução automática. (marque a caixa " Autoplay ").

Como exibir um caixa de luz num artigo

Le plug-in propõe uma lista de shortcodes o que lhe permitirá exibir caixa de luz em artigos. Esqueci de mencionar que você também pode assistir aos vídeos disponíveis em Vimeo.

Para ver um vídeo YouTube ou Vimeovocê deve usar o shortcodes suivant:

[video_lightbox_youtube] (pour YouTube)
[video_lightbox_vimeo5] (pour Vimeo)

Cada um destes shortcodes aceita parâmetros, o que permitirá:

• Defina o identificador (video_id) de um vídeo, geralmente neste formato " YzqKMmQ_3Sg ". exemplos [video_lightbox_youtub video_id ="YzqKMmQ_3Sg"]
• Defina a altura do vídeo (altura)
• Defina a largura do vídeo (largura)
• Adicione uma descrição (descrição)
• Adicione uma âncora HTML (âncora), ou texto do link que abrirá a janela
• Adicione uma miniatura (auto_thumb)

Se você definir uma âncora HTML, a miniatura será ignorada. Caso contrário, auto_thumb pega o valor " 1 ".

Vá além, descobrindo também Como usar e gerenciar códigos de acesso WordPress

Demonstração de um caso de uso

Com o que acabei de fornecer, você pode exibir um vídeo usando um código semelhante a este:

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0" width="640" height="480" anchor="Une simple vidéo" description="Par Dr WP"]

Para um resultado semelhante

Você pode visualizar uma miniatura, como mostrado acima, com um código semelhante a este.

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0" width="640" height="480" auto_thumb="1" description="Par Dr WP"]

Para um resultado idêntico a este

antes de sair

Deve-se notar que alguns parâmetros no shortcodes substituirá os definidos nas configurações.

Descubra também alguns plugins premium do WordPress  

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. FileBird

Você já teve dificuldades para gerenciar milhares de arquivos de imagem, vídeo ou documentos que você carregou para o FTP do seu WordPress? Sim ou não, não importa; o importante é saber que o plugin FileBird para WordPress ajudará você a gerenciar seus arquivos de mídia com facilidade e a dar mais poder à sua biblioteca.

Sua interface de usuário perfeita e menu de contexto permitem que os usuários arrastem e soltem arquivos em pastas ou tenham os direitos necessários para criar, renomear ou excluir rapidamente pastas da mesma maneira que você faz no seu computador. Com este plugin em mãos, seus arquivos de mídia serão sistematicamente organizados e você pode facilmente selecionar uma imagem para inserir em uma página ou publicá-la.

Descubra também o nosso 6 plug-ins do WordPress para dar uma nova vida aos seus artigos

Além disso, este plugin é totalmente compatível com os plugins mais populares, especialmente com WooCommerce, e também suporta um grande número de idiomas. Então, se você quer dar um impulso ao gerenciamento da sua biblioteca de mídia, o plugin FileBird do WordPress pode ser sua arma secreta.

Download | Demo | hospedagem na web

2. Social Share & Locker Pro

A extensão Social Share & Locker Pro foi desenvolvida para ajudar seu site a obter mais visibilidade nas redes sociais. Com apenas alguns cliques, você pode definir a posição dos seus ícones de compartilhamento ou bloquear seu conteúdo, exigindo o compartilhamento em uma das redes sociais selecionadas.

Você tem 10 modelos para escolher, que devem atender à maioria das necessidades comuns. Todos esses modelos são excelentes e funcionam perfeitamente. Além disso, com o Social Share & Locker Pro, você pode exibir o nome completo das redes sociais ou apenas o ícone. Isso dependerá do seu design, do espaço disponível ou da sua preferência pessoal.

Download | Demo | hospedagem na web

3. Formulário de Contato 7 Tooltips

Esta extensão do WordPress para o plugin Contact Form 7 adiciona uma funcionalidade de dicas de ferramentas fácil de usar. Essas dicas aparecem quando o cursor passa sobre o elemento selecionado. Em dispositivos móveis, as dicas indicam quando o elemento selecionado está sendo interagido.

Suas principais características são: facilidade de uso, suporte para todas as versões do Contact Form 7, personalização da cor de fundo da dica, suporte para código HTML, layout completo responsivo e muito mais.

Download | Demo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

• Elementor: como abrir um pop-up de uma url ou menu
• Como rebaixar uma versão de um plugin do WordPress
• Como encontrar um patrocinador e monetizar seu blog? : O guia
• Como personalizar o painel do WordPress para um cliente
• Como criar um menu sensível para WordPress móvel

Conclusão

Aqui! É tudo para este tutorial; espero que ajude você a exibir vídeos do YouTube ou Vimeo em um... lightbox no seu site WordPress. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas. 

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Mas, enquanto isso, conte-nos sobre seu Comentários e sugestões na seção dedicada.

...