Você já viu sites populares usando as miniaturas de seus vídeos do YouTube na página inicial do site? Se você tem um canal de vídeos em sites como YouTube, Vimeo, ou outros, então você também pode exibir uma miniatura de vídeo para todas as postagens que contêm vídeos nas páginas inicial e de arquivo do seu blog. Neste artigo, mostraremos como adicionar miniaturas para vídeos do YouTube no WordPress.
Miniaturas de Vídeo e Miniaturas de Postagem do WordPress
O WordPress vem com funcionalidade integrada para adicionar imagens destacadas ou miniaturas de postagem, e a maioria dos temas do WordPress suporta esse recurso. No entanto, se você deseja destacar seu conteúdo de vídeo do YouTube, então você vai querer exibir esse conteúdo com miniaturas de vídeo. Este artigo o ajudará a fazer isso usando a funcionalidade padrão de miniatura de postagem do WordPress.
Configurando o Plugin de Miniaturas de Vídeo no WordPress
A primeira coisa que você precisa fazer é instalar e ativar o plugin Video Thumbnails. Após ativar o plugin, você precisa ir para Configurações » Video Thumbnails para configurar as opções do plugin.
Na tela de configurações, recomendamos que você escolha armazenar a miniatura em sua biblioteca de mídia. Isso reduzirá as requisições HTTP externas em seu site, e suas páginas carregarão mais rápido. Na seção de tipos de postagem, o plugin mostrará postagens, páginas e tipos de postagem personalizados se você tiver algum em seu site. Selecione os tipos de postagem que você deseja que o plugin escaneie em busca de links de vídeo. A última opção nesta página é escolher um campo personalizado. Alguns plugins de vídeo para WordPress salvam URLs de vídeo em um campo personalizado, e se você estiver usando tais plugins, então você precisará inserir esse campo personalizado aqui. Depois disso, clique no botão Salvar Alterações.
Na página de configurações, você também verá a aba Provedores. Se você estiver usando o Vimeo para compartilhar seus vídeos, então você precisará criar um aplicativo no Vimeo e, em seguida, inserir os valores de ID do cliente, segredo do cliente, token de acesso e segredo do token de acesso aqui.
Na aba Ações em Massa, você pode escanear suas postagens publicadas em busca de vídeos e gerar miniaturas de vídeo para elas. O plugin também fornece um botão para limpar todas as miniaturas de vídeo e removê-las como anexo de suas postagens.
Criando Miniaturas de Vídeo em Postagens do WordPress
Agora que você configurou o plugin, vamos criar uma miniatura de vídeo adicionando um URL de vídeo em uma postagem do WordPress. Para fazer isso, você precisa criar ou editar uma postagem do WordPress e adicionar seu URL de vídeo na área de edição da postagem. Assim que você publicar a postagem, você verá que o plugin gerou uma miniatura de vídeo para você e a adicionou à sua postagem.
Exibindo uma Miniatura de Vídeo em seu Tema do WordPress
O plugin de miniaturas de vídeo usa a funcionalidade de Miniaturas de Postagem do WordPress. A maioria dos temas do WordPress é configurada para exibir miniaturas de postagem automaticamente. Isso significa que seu tema exibirá automaticamente a miniatura do vídeo junto com o conteúdo ou o trecho da sua postagem. No entanto, se o seu tema não exibir as miniaturas de vídeo, você precisará editar os arquivos do seu tema e adicionar este código ao modelo onde você deseja exibir a miniatura.
<?php the_post_thumbnail(); ?>
Como Adicionar um Botão de Reprodução na Miniatura de Vídeo no WordPress
Agora que você capturou e exibiu com sucesso miniaturas de vídeo em suas postagens do WordPress, você pode querer distinguir suas miniaturas de imagem regulares de suas miniaturas de vídeo. Isso informará aos seus usuários que há um vídeo na postagem e que eles podem clicar no botão de reprodução para assistir à postagem de vídeo. Mostraremos como usar tags condicionais para distinguir entre miniaturas de vídeo e miniaturas de postagem regulares e adicionar um botão de reprodução.
Para usar este método, você precisa garantir que publica suas postagens de vídeo sob uma categoria específica, por exemplo, Vídeos. Em seguida, dentro dos arquivos de modelo do seu tema, como index.php, archive.php, category.php ou content.php, procure por esta linha de código:
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
Agora precisamos substituir este código pelo seguinte código:
<?php if ( in_category( 'video' )) : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="playbutton"></span></a> <?php else : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> <?php endif; ?>
Este código adiciona <span class="playbutton"?></span> após a miniatura da postagem apenas para postagens categorizadas como vídeo. O próximo passo é fazer o upload de um arquivo de imagem na tela Mídia » Adicionar Novo. Esta imagem será usada como botão de play. Assim que você fizer o upload do arquivo de imagem, anote a localização do arquivo de imagem clicando no link Editar ao lado da imagem.
O passo final é exibir o botão de play. Usaremos CSS para exibir e posicionar o botão de play na miniatura do vídeo. Para fazer isso, você precisa copiar e colar este código CSS em sua folha de estilos do tema ou tema filho clicando em Aparência » Editor.
.playbutton {
background: url('http://example.com/wp-content/uploads/playbutton.png') center center no-repeat;
position: absolute;
top: 50%;
left: 50%;
width: 74px;
height: 74px;
margin: -35px 0 0 -35px;
z-index: 10;
opacity:0.6;
}
.playbutton:hover {
opacity:1.0;
}
Não se esqueça de substituir a URL da imagem de fundo pela URL do arquivo de imagem do botão de play que você carregou anteriormente. É tudo. Seus arquivos de miniatura de vídeo agora devem ter um botão de play neles.
Esperamos que este artigo tenha ajudado você a destacar seus vídeos do YouTube com miniaturas no WordPress. Para feedback e perguntas, por favor, deixe um comentário ou siga-nos no Twitter.
Peter
É incrível que ainda funcione!
No entanto, alguém sabe por que não está recebendo uma miniatura de uma playlist do YT?
tenho vários posts com playlists e a imagem é sempre uma imagem cinza de "Vídeo não encontrado"
WPBeginner Support
O plugin foi criado para vídeos e não para playlists inteiras, você precisaria entrar em contato com o autor do plugin para incluir a funcionalidade de playlist.
Admin
eddie art
isso funcionaria para obter uma imagem em miniatura em um vídeo com código de incorporação iframe?
WPBeginner Support
Você precisaria verificar com o suporte do plugin se isso é suportado.
Admin
Faisal Iqbal
Onde colocar esse código em functions.php. Eu não sou um expert, por favor, alguém me ajude?
Mohammad
Oi
Eu tento usar este plugin, mas ele não funciona para mim e o desenvolvedor nos fóruns de suporte não responde à maioria dos tópicos não resolvidos. Na página de depuração, quando tento “Testar Marcação para Vídeo”, recebo este erro:
Miniatura encontrada, mas ela pode não existir no servidor de origem. Se abrir o URL abaixo em seu navegador retornar um erro, a origem está fornecendo um URL inválido. URL da miniatura:
qual é o problema?
Neon emmanuel
E se eu quiser três parâmetros, 1 um fallback quando não houver miniatura, 2 um fallback se for vídeo (ou seja, adicionando uma sobreposição de botão de reprodução a ele) e 3 um fallback se for vídeo com um ícone de reprodução sobreposto a ele.
Bryan
Algum deste código funcionará para Adobe Muse/Dreamweaver?
john
Oi
Estamos procurando um desenvolvedor que possa implementar isso para nós. Você está disponível?
pamela sillah
Existe alguma outra maneira de eu fazer isso SEM plugins?? por favor ajude
franck
Olá pessoal,
Alguém sabe como remover vídeos relacionados quando um vídeo do YouTube é reproduzido até o fim no plugin de galeria de vídeos da Huge IT?
Ernesto
Como faço para remover a imagem de dentro da entrada? Quero que o vídeo seja exibido e sem imagem
Quoterland
Obrigado, ótimo tutorial.
Rihan
And wordpress 4.0 I add the video (youtube) URL in the post edit area and its showing me a video player
on the video thumb are i can see this text only (No video thumbnail for this post.) not working!
any Idea
thanks
Equipe WPBeginner
Não, sua miniatura aparecerá no Facebook, mas não terá o botão de reproduzir.
srem
Desculpe, não sei por que o código não está sendo exibido.
Mauro Scarpa
Oi! Ótimo site e post, tenho uma pergunta, se eu quiser compartilhar meu post no Facebook, ele aparecerá com o botão de reproduzir também? Obrigado
Piet
Plugin e tutorial legais. Em vez de mostrar uma imagem de botão de reproduzir, eu gostaria de sugerir o uso de um ícone de fonte, por exemplo, do FontAwesome.
Equipe WPBeginner
TCB: se você estiver usando o plugin WordPress SEO, então você pode tentar este método. Assim que o plugin de miniatura de vídeo tiver buscado a imagem em miniatura do seu vídeo, você precisará encontrar sua localização na sua biblioteca de mídia e copiar o URL. Depois disso, remova a imagem em miniatura do vídeo da postagem. Na caixa meta do WordPress SEO no editor de postagens, clique na aba social e cole o link ao lado do campo de imagem do Facebook.
TCB
É possível usar a miniatura do vídeo como imagem de postagem no Facebook?
Seria ótimo porque não quero mostrar a imagem como imagem destacada.
Megha Verma
Estou enfrentando um problema, pois o botão de reproduzir está aparecendo apenas na primeira postagem... devido à posição absoluta... não nas imagens de outras postagens...
Sutherland Boswell
Ótimo tutorial! Como desenvolvedor, adoro receber feedback dos usuários e trabalhar em soluções fáceis para os recursos mais solicitados. Sobrepor um botão de play e fazer o vídeo realmente tocar ao clicar na miniatura são dois dos recursos mais solicitados, mas ambos dependem muito do tema. Aprender a modificar um tema por conta própria pode ser gratificante, então não tenha medo de tentar!
PS – Espero que todos verifiquem a versão pro!
Jesse
Olá Sutherland.
Li tantas coisas boas sobre o seu plugin e estou ansioso para experimentá-lo.
No entanto, ao usar seu plugin para escanear arquivos de vídeo, ele encontra todos os 22 vídeos na página 'vídeo' onde eles são postados. O problema é que ele não está encontrando nenhuma miniatura.
Depois de ler suas várias respostas de suporte a problemas semelhantes, bem como suas instruções, procurei descobrir se meu tema (metric, por grandpixels) está usando um campo personalizado. Não obtive sucesso em encontrar essa informação.
Você tem sugestões sobre como fazer isso funcionar?
Obrigado,
Jesse
Audee
E se eu quiser exibir a miniatura do post apenas para posts arquivados sob o 'Formato de Post' de vídeo?
Obrigado por compartilhar o artigo sobre este plugin!
Sutherland Boswell
Você deve ser capaz de seguir o tutorial, apenas substitua
1-click Use in WordPress
com
1-click Use in WordPress
Alex
Olá Sutherland Boswell,
Eu uso seu plugin para o tema Detube, o problema é que não há nenhuma linha de código <a href="”> nesses arquivos: index.php, archive.php, category.php..
Você tem alguma ideia ou uma maneira de fazer funcionar no tema Detube?
Agradeço desde já!
Alex
Eu ficaria muito feliz se alguém tivesse uma ideia e pudesse responder à minha pergunta. Tenho trabalhado por muitas horas para fazer este código funcionar no Detube, mas sem sucesso até agora…
Alguém aqui poderia me ajudar, por favor?
Ahmad Rafi Maseer
Como reproduzir diretamente na miniatura para que o usuário não precise ir para a página do post para reproduzir o vídeo???
WPBeginner Support
Para isso, você terá que editar seu tema e, em vez de exibir a miniatura, terá que incorporar o vídeo.
Admin
Sue Anne
Muito obrigado pelas ótimas instruções sobre como colocar um vídeo e uma miniatura de vídeo no meu blog WordPress. Levou cerca de 5 minutos e eu não sou nenhuma expert em tecnologia!
Pali Madra
Oi!
Ótimo site e um dos meus posts favoritos.
Tive uma pergunta relacionada. Estou adicionando vídeos colocando o URL no código HTML dos posts, mas também quero mostrar uma legenda abaixo dele. Isso é possível sem usar um plugin?
Agradeço desde já
Matt
Tutorial fantástico. Muito obrigado por postar isso!
Tiguan
O ‘span’ deve ser colocado dentro das tags de hyperlink da miniatura, caso contrário, o link da imagem sobre o botão de reprodução será desativado. Portanto, o código correto será:
No entanto, é um bom tutorial.
WPBeginner Support
Tiguan, obrigado por apontar isso. Atualizamos o tutorial.
Admin
adolf witzeling
Ótimo tutorial.
gottfrid q.
> Isso informará aos seus usuários que há um vídeo na postagem e eles podem clicar no botão de reprodução para ver a postagem em vídeo.
Não quero decepcioná-lo, mas o botão (girar) não tem nenhum método de clique.
Como exatamente este botão deveria funcionar e como implementá-lo?
Obrigado pelo seu tempo.
WPBeginner Support
O botão não reproduzirá o vídeo ali mesmo, mas levará o usuário para a página do vídeo. A miniatura inteira está vinculada à postagem que contém o vídeo.
Admin
gottfrid q.
O 'span' deve ser colocado dentro das tags de hiperlink da miniatura, então?
Akash
E. como implementar o Botão de Reprodução no Tema GENESIS? não há arquivo index.php, archive.php, category.php ou content.php lá para adicionar o código.
Obrigado.
WPBeginner Support
Contate os fóruns de suporte do Genesis.
Admin
Mark McGinnis
Akash, você conseguiu descobrir como implementar usando o tema Genesis? Eu tenho o mesmo problema…
Obrigado!
Akash
Mas qual será o tamanho da Miniatura do Vídeo? Será o mesmo que a miniatura de imagem já definida no blog?
WPBeginner Support
Ele usará o tamanho de miniatura padrão. Você pode substituir isso adicionando seu próprio tamanho de imagem e usá-lo em seu template. Por exemplo, se você criar um novo tamanho de miniatura e chamá-lo de video-thumbnail, você o chamaria em seu template assim:
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Admin