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ídeo 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 em destaque ou miniaturas de postagem, e a maioria dos temas do WordPress suporta esse recurso. No entanto, se você quiser destacar seu conteúdo de vídeo do YouTube, você vai querer exibir esse conteúdo com miniaturas de vídeo. Este artigo ajudará você 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 » Miniaturas de Vídeo para configurar as opções do plugin.
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.
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 padrão da miniatura. Você pode substituir isso adicionando seu próprio tamanho de imagem e usá-lo em seu modelo. Por exemplo, se você criar um novo tamanho de miniatura e nomeá-lo video-thumbnail, você o chamaria em seu modelo assim:
<?php the_post_thumbnail('video-thumbnail'); ?>1-click Use in WordPress
Admin