Ir para o conteúdo principal

Como abrir um vídeo do Youtube em um pop-up no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 701.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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 mesmo formulários de registro. 

Mas você sabia que também é possível usá-lo para exibir vídeos no WordPress ? Não? 

Não se preocupe, neste tutorial irei 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ê não sabe é que nem todas as imagens exibidas nelas são carregadas durante o « cobrança«  página. 

Le navegador carregar : imagens quando o caixa de luz abre, este também é o caso dos vídeos. Resumindo, é um recurso que permitirá que suas páginas abram mais rápido. 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 em WordPress.org. O que 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 estar ativo (cheque « permitir foto bonita »)Para permitir que os usuários saibam que eles 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 

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Todas as suas caixas de luz podem ter um título que possa ser exibido (Show 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 ").

define-as-regalges

Como exibir um caixa de luz num artigo

Le plug-in propõe uma lista de shortcodes que permitirá que você exiba caixa de luz em artigos. Esqueci de avisar que vocês também podem ver os vídeos disponíveis no Vimeo.

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

[video_lightbox_youtube] (para o YouTube)
[video_lightbox_vimeo5] (Para 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 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 = 0width = "640height = "480anchor = "Um vídeo simples " description = "Por Dr. WP "]

Para um resultado semelhante

apresentação para-resultados

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

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

Para um resultado idêntico a este

mini-dunas-video

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 dificuldade para gerenciar milhares de arquivos de imagem, vídeo ou documento que carregou no FTP do WordPress? sim ou não, tanto faz, o importante é saber que o plugin WordPress FileBird vai te ajudar a gerenciar seus arquivos de mídia com facilidade e trazer mais poder para sua biblioteca.FileBird

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 plug-in em mãos, seus arquivos de mídia serão organizados sistematicamente e você poderá selecionar facilmente uma imagem para inserir em uma página ou publicar nela.

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. Portanto, se você deseja impulsionar o gerenciamento de sua biblioteca de mídia, o plug-in FileBird WordPress pode ser sua arma secreta.

DescarregarDemo hospedagem na web

2. Social Share & Locker Pro

A extensão Social Share & Locker Pro foi projetada para ajudar seu site a ser mais visível nas redes sociais. Com apenas alguns cliques, você pode definir a posição de seus ícones sociais ou bloquear seu conteúdo solicitando o compartilhamento em uma das redes sociais oferecidas por você.

Plugin WordPress do Social Share Locker Pro

Você tem 10 modelos que devem cobrir os desejos mais comuns. Todos os seus modelos são perfeitos e funcionam maravilhosamente bem. Além disso, com o Social Share & Locker Pro, você poderá exibir o nome completo das redes sociais ou apenas o ícone. Dependerá do seu projeto, do espaço disponível ou do seu gosto.

Descarregar | Demo | hospedagem na web

3. Formulário de Contato 7 Tooltips

Esta extensão WordPress do plug-in Contact Form 7 traz um recurso de adicionar dicas de ferramentas facilmente ao seu plug-in Contact Form 7. Suas dicas de ferramentas serão exibidas quando o elemento de destino for passado. Em dispositivos móveis, as dicas de ferramentas indicam quando o item de destino está ativado.Contact Form 7 Tooltips

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.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Descarregar | 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.

Conclusão

Aqui! É isso para este tutorial, espero que ajude você a exibir vídeos do Youtube ou Vimeo em um lightbox no seu site WordPress. sinta-se livre para compartilhe a dica com seus amigos em suas redes sociais.

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.

...

Este artigo contém comentários 7

  1. Bom Dia,
    Eu estou procurando uma maneira de exibir um pop-up de vídeo após um clique de um botão. É possível fazer isso com o WP Video Lightbox?

    obrigado,
    Atenciosamente,

  2. Bom Dia,
    Muito obrigado por este tutorial bem construído, queria saber se era possível adicionar vídeos de outras plataformas além de You Tube e Vimeo (exemplo Openload) ou se haveria um limite.

    seu

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
7 ações
ação5
chilrear
Enregistrer2