WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» 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
60 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

Adding a video in WordPress Post and Generating a Video Thumbnail

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.

60 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

43 Comments

Leave a Reply
  1. Peter says:
    Sep 3, 2020 at 4:04 am

    It is amazing that it still works!
    However does somebody know why it is not getting a thumbnail from a YT playlist?
    i´ve several posts with playlist and the image is always a grey “Video is not found” image

    Reply
    • WPBeginner Support says:
      Sep 8, 2020 at 3:18 pm

      The plugin was created for videos and not entire playlists, you would need to reach out to the plugin’s author for including playlist functionality.

      Reply
  2. eddie art says:
    May 20, 2019 at 2:51 am

    would this work to get a thumbnail image on an iframe embed code video?

    Reply
    • WPBeginner Support says:
      May 20, 2019 at 1:58 pm

      You would need to check with the plugin’s support for if that is supported.

      Reply
  3. Faisal Iqbal says:
    Jun 24, 2017 at 12:55 am

    Where to put that code in functions.php. I am no techie please anybody help me?

    Reply
  4. Mohammad says:
    Jun 6, 2017 at 8:02 pm

    Hi
    I try to use this plugin but it doesn’t work for me and the developer in support forums doesn’t answer most of the unsolved topics. In debugging page when I try “Test Markup for Video” I get this error:

    Thumbnail found, but it may not exist on the source server. If opening the URL below in your web browser returns an error, the source is providing an invalid URL. Thumbnail URL:
    what’s the problem?

    Reply
  5. Neon emmanuel says:
    Mar 16, 2017 at 6:16 pm

    what if i want three parameters, 1 a fall back when there is no thumbnail, two i fall back if it is video, (i.e) adding a play button overlay to it , and three a fall back it it is video with an overlay play icon on it.

    Reply
  6. Bryan says:
    Jan 3, 2017 at 11:08 am

    Will any of this code work for Adobe Muse/Dreamweaver?

    Reply
  7. john says:
    Nov 18, 2016 at 6:37 am

    Hi
    We are looking for a developer who can implement this for us. Are you available ?

    Reply
  8. pamela sillah says:
    Aug 10, 2016 at 10:45 am

    Is there any other way for me to do this WITHOUT plugins?? please help

    Reply
  9. franck says:
    Dec 12, 2015 at 8:06 am

    Hi folks,

    is anybody know how to remove related video when Youtube video is played till the end in video gallery plugin from Huge IT?

    Reply
  10. Ernesto says:
    Sep 8, 2015 at 12:01 pm

    How do I remove the image from inside the entrance? I want input into the video display and no image

    Reply
  11. Quoterland says:
    Jun 5, 2015 at 7:03 am

    Thanks, great tutorial.

    Reply
  12. Rihan says:
    Oct 1, 2014 at 1:54 am

    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

    Reply
  13. WPBeginner Staff says:
    Sep 16, 2014 at 4:07 pm

    No, your thumbnail will appear on Facebook but it will not have the play button on it.

    Reply
    • srem says:
      Apr 5, 2016 at 12:21 am

      Sorry I don’t know why it not show code.

      Reply
  14. Mauro Scarpa says:
    Sep 15, 2014 at 5:15 pm

    Hi! Great website and post, i have a question, if then I want to share my post on facebook, will appear whit the play button also? Thanks

    Reply
  15. Piet says:
    May 28, 2014 at 8:22 pm

    Cool plugin and tutorial. Instead of showing a play button image, I would like to suggest using a font icon, for example from FontAwesome.

    Reply
  16. WPBeginner Staff says:
    May 9, 2014 at 2:57 pm

    TCB: if you are using WordPress SEO plugin then youc an try this method. Once the video thumbnail plugin has fetched the thumbnail image for your video, you need to find its location in your media library and copy the URL. After that remove the video thumbnail image from the post. In the WordPress SEO meta box on the post editor, click on the social tab, and paste the link next to the facebook image field.

    Reply
  17. TCB says:
    May 9, 2014 at 6:12 am

    Is it possible to use the video thumbnail as post image on facebook?
    That would be great because I don’t want to the show the picture as featured image.

    Reply
  18. Megha Verma says:
    Feb 24, 2014 at 11:34 am

    I am facing a problem as the play button is showing only on the first post….due to absolute position….not on other post’s images…

    Reply
  19. Sutherland Boswell says:
    Jan 28, 2014 at 2:15 am

    Great tutorial! As the developer I love to get feedback from users and work on easy solutions for the most requested features. Overlaying a play button and making the video actually play when clicking the thumbnail are two of the most requested features, but they’re both highly dependent on the theme. Learning to modify a theme on your own can be rewarding, so don’t be afraid to give it a shot!

    PS – I hope everyone will check out the pro version!

    Reply
    • Jesse says:
      Jan 29, 2014 at 12:43 am

      Hi Sutherland.

      I’ve read such good things about your plugin and I’m eager to try it.

      However, when using your plugin to scan for video files, it finds all 22 videos under the ‘video’ page which they are posted. The problem is it isn’t finding any thumbnails.

      After reading your various support replies to similar issues, as well as your instructions, i sought to find out whether my theme (metric, by grandpixels) is using a custom field. I have been unsuccessful in finding this information.

      Do you have suggestions on how to make this work?

      Thanks,

      Jesse

      Reply
  20. Audee says:
    Jan 23, 2014 at 8:05 pm

    What if I want to display post thumbnail only for posts filed under video ‘Post Format’ ?

    Thank you for sharing article about this plugin!

    Reply
    • Sutherland Boswell says:
      Jan 28, 2014 at 2:28 am

      You should be able to follow the tutorial, just replace

      <?php if ( in_category( 'video' )) : ?>

      with

      <?php if ( get_post_format() == 'video' ) : ?>
      Reply
      • Alex says:
        Apr 8, 2014 at 6:59 pm

        Hi Sutherland Boswell,

        i use your plugin for Detube theme, the problem is there is no <a href="”> code line in those files: index.php, archive.php, category.php..
        Do you have any idea or a way to make it work in Detube theme?

        Thanks in advance!

        Reply
        • Alex says:
          Apr 12, 2014 at 11:31 pm

          i would be so glad if someone has an idea and could answer my question. I’ve been working for many hours to get this code works on Detube, but no succes untill now…
          Could someone here please help me?

  21. Ahmad Rafi Maseer says:
    Jan 14, 2014 at 9:50 am

    HOw to play directly in thumbnail so the user should not go to post page to play the video???

    Reply
    • WPBeginner Support says:
      Jan 15, 2014 at 9:48 am

      For that you will have to edit your theme and instead of displaying the thumbnail you will have to embed the video.

      Reply
  22. Sue Anne says:
    Jan 12, 2014 at 10:01 am

    Thanks SO much for the great instruction on putting a video and video thumbnail on my WordPress blog. It took about 5 minutes and I’m no techie!

    Reply
  23. Pali Madra says:
    Dec 25, 2013 at 5:07 am

    Hi!

    Great website and one of my favorite post.

    I had a related question. I’m adding video by placing the URL in the HTML code of the posts but I also want to show a caption below it. Is that possible without using a plugin?

    Thanks in advance

    Reply
  24. Matt says:
    Dec 19, 2013 at 10:25 pm

    Fantastic tutorial. Thanks very much for posting this!

    Reply
  25. Tiguan says:
    Dec 15, 2013 at 10:41 am

    The ‘span’ must be placed inside the thumbnail’s hyperlink tags, otherwise the image link over play button will be disabled. So the correct code will be:

    However, it’s a nice tutorial.

    Reply
    • WPBeginner Support says:
      Dec 15, 2013 at 11:28 am

      Tiguan, thanks for pointing this out. We have updated the tutorial.

      Reply
  26. adolf witzeling says:
    Nov 20, 2013 at 1:29 pm

    Great tutorial.

    Reply
  27. gottfrid q. says:
    Nov 8, 2013 at 11:32 am

    > 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.
    I don’t want to disappoint you, but the button (spin) don’t have any click method.
    How exactly this button was supposed to work and how to implement it?

    Thanks for your time.

    Reply
    • WPBeginner Support says:
      Nov 8, 2013 at 11:55 am

      The button will not play the video right there, however it will take the user to the video page. The whole thumbnail is linked to the post containing the video.

      Reply
      • gottfrid q. says:
        Nov 9, 2013 at 1:01 am

        Must the ‘span’ be placed inside the thumbnail’s hyperlink tags then?

        Reply
  28. Akash says:
    Nov 6, 2013 at 12:55 am

    And. how to implement Play Button in GENESIS Theme? there is no index.php, archive.php, category.php, or content.php file there to add the code.

    Thanks.

    Reply
    • WPBeginner Support says:
      Nov 6, 2013 at 7:34 pm

      Contact Genesis support forums.

      Reply
    • Mark McGinnis says:
      Oct 16, 2014 at 10:17 pm

      Akash, did you ever figure out how to impliment using Genesis theme? I have the same issue…

      Thanks!

      Reply
  29. Akash says:
    Nov 5, 2013 at 11:11 pm

    But what will be the size of the Video Thumbnail? Will it be same as the image thumbnail already set in the blog?

    Reply
    • WPBeginner Support says:
      Nov 6, 2013 at 7:46 pm

      It will use the default thumbnail size. You can over ride this by adding your own image size and use it in your template. For example if you create a new thumbnail size and name it video-thumbnail you would call it in your template like this:

      <?php the_post_thumbnail('video-thumbnail'); ?> 
      
      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Churnly Coupon
Get 30% OFF on Churnly WordPress automated churn-busting plugin.
AccessPress Themes
AccessPress Themes Coupon
Get 15% off on AccessPress Themes collection of premium WordPress themes and plugins.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.