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 600.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 email, promoções ou formulários de registro.

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

Não se preocupe, neste tutorial vou mostrar como postar 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 nela são carregadas durante o « cobrança« página.

Le navegador carregar : imagens quando o caixa de luz abre, esse também é o caso dos vídeos. Em suma, é um recurso que permitirá que suas páginas se 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. O que significa que você pode instalá-lo diretamente do seu 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 a guia " 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 estão na mesma página, você poderá tornar a janela transparente (definir um valor de 0 a 1. Valores de vírgula são aceitos).

Discover As características de um popup efetivo para o WordPress

Comece a promover seu blog

Faça o download de dezenas de logotipos, banners, modelos de sites e muitas outras ferramentas de marketing para comercializar seu blog WordPress. [Recomendado]

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ê deve 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 leitura 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 o que permitirá que você exiba caixa de luz em artigos. Esqueci de lhe dizer que você também pode ver os vídeos disponíveis em 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) 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 = 0 » width = "640 » height = "480 » anchor = "A vídeo simples » description = »Por Dr. WP "]

Para um resultado semelhante

apresentação para-resultados

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 = »Por Dr. WP "]

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]

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 problemas para gerenciar milhares de arquivos de imagem, vídeos ou documentos que você enviou para o FTP do WordPress? sim ou não, seja o que for, o importante é saber que o plugin FileBird WordPress o ajudará a gerenciar seus arquivos multimídia com facilidade e trará 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 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.

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.

Descarregar | Demo | hospedagem na web

2. Compartilhar Social e Locker Pro

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

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

Descarregar | Demo | hospedagem na web

3. Formulário de Contato 7 Tooltips

Esta extensão do WordPress do plug-in Formulário de contato 7 fornece um recurso para adicionar dicas de ferramentas facilmente ao seu plug-in Formulário de contato 7. Suas dicas de ferramentas serão exibidas quando o item de destino for sobrevoado. Em dispositivos móveis, as dicas de ferramentas indicam quando o item de destino está ativado.

Suas principais características são: facilidade de uso, suporte para todas as versões do Formulário de contato 7, personalização da cor do plano de fundo da dica de ferramenta, suporte HTML, layout da página inteira responsivo e muito mais.

Descarregar | Demo | hospedagem na web

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]

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 é 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 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 o 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,
    Obrigado por este tutorial bem construído, eu queria saber se era possível adicionar vídeos de outros que não o YouTube e Vimeo (exemplo openload) plataformas 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