WPBeginner» Blog» WordPress Plugins» How to Add Thumbnails For YouTube Videos in WordPress

How to Add Thumbnails For YouTube Videos in WordPress

Last updated on December 15th, 2013 by Editorial Staff

Special WordPress Hosting offer for WPBeginner Readers

How to Add Thumbnails For YouTube Videos in WordPress

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.

An example of video thumbnails in WordPress

Video Thumbnails and WordPress Post Thumbnails

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.

Setting up Video Thumbnails Plugin in 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.

Setting up video thumbnails

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.

Adding Vimeo app credentials

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.

Scan posts to generate video thumbnails

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

Video thumbnails plugin uses WordPress Post Thumbnails functionality. Most WordPress themes are setup to automatically display post thumbnails. This means that your theme will automatically display the video thumbnail along with your post content or excerpt. However if your theme does not display the video thumbnails, then you need to edit your theme files and add this code to the template where you want to display thumbnail.

<?php the_post_thumbnail(); ?>

How to Add a Play Button on the Video Thumbnail in WordPress

Now that you have successfully captured and displayed video thumbnails in your WordPress posts, you might want to distinguish your regular image thumbnails from your video thumbnails. This will let your users know that there is a video in the post, and they can click on the play button to view the video post. We will show you how to use conditional tags to distinguish between video thumbnails and regular post thumbnails and add a play button.

To use this method you need to make sure that you publish your video posts under a specific category, for example, Videos. Then inside your theme’s template files like index.php, archive.php, category.php, or content.php look for this line of code:

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

Now we need to replace this code with the following code:

<?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; ?>

This code adds <span class="playbutton"?></span> after the post thumbnail only for posts filed under video category. The next step is to upload an image file from Media » Add New screen. This image will be used as the play button. Once you have uploaded the image file, note the image file location by clicking on the Edit link next to the image.

The final step is to display the play button. We will be using CSS to display and position the play button on the video thumbnail. To do that, you need to copy and paste this CSS code in your theme or child theme’s stylesheet by clicking on Appearance » 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;
}

Don’t forget to replace the background image url with the URL of the play button image file you uploaded earlier. That’s all. Your video thumbnail files should now have a play button on them.

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.