Have you seen popular sites using their YouTube video thumbnails on the front page of their site? If you run a video channel on sites like YouTube, Vimeo, or others, then you too can display a video thumbnail for all posts containing videos on the front and archive pages of your blog. In this article, we will show you how to add thumbnails for YouTube videos in WordPress.
Miniaturas de Vídeo e Miniaturas de Postagem do WordPress
WordPress comes with built-in functionality to add featured images or post thumbnails, and most WordPress themes support this feature. However, if you want to highlight your video content from YouTube, then you would want to showcase that content with video thumbnails. This article will help you do that by using the default WordPress post thumbnail functionality.
Configurando o Plugin de Miniaturas de Vídeo no WordPress
First thing you need to do is install and activate Video Thumbnails plugin. After activating the plugin, you need to go to Setttings » Video Thumbnails to configure the plugin settings.
On the settings screen, we recommend that you choose to store the thumbnail in your media library. This will reduce external http requests on your site, and your pages will load faster. Under the post types section the plugin will show posts, pages, and custom post types if you have any on your website. Select the post types you want the plugin to scan for videos links. The last option on this page is to choose a custom field. Some video plugins for WordPress save video URLs in a custom field, and if you are using such plugins, then you will need to enter that custom field here. After that click Save Changes button.
On the settings page, you will also see the Providers tab. If you are using Vimeo to share your videos, then you will need to create an app on Vimeo and then enter client ID, client secret, access token, and access token secret values here.
On the Mass Actions tab, you can scan your published posts for videos and generate video thumbnails for them. The plugin also provides a button to clear all video thumbnails and remove them as attachment from your posts.
Creating Video Thumbnails in WordPress Posts
Now that you have set up the plugin, let’s create a video thumbnail by adding a video URL in a WordPress post. To do that you need to create or edit a WordPress post and add your video URL in the post edit area. Once you publish the post, you will see that the plugin has generated a video thumbnail for you and added it to your post.
Displaying a Video Thumbnail in your WordPress Theme
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.
We hope this article helped you highlight your YouTube videos with thumbnails in WordPress. For feedback and questions please leave a comment or follow us on 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 – I hope everyone will check out the pro version!
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