WordPress: Add a YouTube Video as a Featured Image

WordPress: Add a YouTube Video as a Featured Image

Knowing how to accurately represent your post with an image is a key part of making your article attractive to readers. Apart from the title, users need to get a clear indication of what is awaiting them. If your blog post contains a video from a popular streaming service like YouTube, you might find it beneficial to use a representative image of the video as your featured media. This is especially true if you don’t have any other picture in your post that you can use. In such a situation, the YouTube video becomes the only pictorial representation of your content and it’s important that the featured image reflects that. Fortunately, there are easy ways to obtain high-resolution images of most YouTube videos – especially those that are uploaded by professional companies. Here’s how to add a Youtube video as a featured image in WordPress.

Extracting the Images from a Youtube Video

Google provides a very easy and predictable URL for obtaining various sizes and resolutions of images representing each and every YouTube video. On a case-by-case basis, it’s easier to do the process manually rather than writing code to take care of it. This is because any plug-in we code will have to make assumptions about the kind of featured image that needs to be set. What if there is more than one YouTube video?

In order to set the image we want as “featured”, we need to go through the following steps:

  1. Get the Youtube video ID;
  2. Decide what sized image we want;
  3. Download the picture;
  4. Set it as the featured image.

Getting the Youtube Video ID

In this test example, I use the trailer of the movie “How to Train Your Dragon 2”.

Here’s the URL: https://www.youtube.com/watch?v=Z9a4PvzlqoQ

The ID of every Youtube video is the string of numbers and letters in the URL just after “?v=” and before any subsequent “&” characters. These are known as query parameters. A “&” sign (if it exists) indicates the start of the next parameter, so we want to select everything between “?v=” and the next “&”. Many videos won’t have more than one parameter, in which case everything after “?v=” is the video ID.

get youtube video id

Selecting the Image Size

Youtube makes many different sizes of pictures available to us. Here are some of the options:

  • default.jpg
  • mqdefault.jpg
  • hqdefault.jpg
  • sddefault.jpg
  • maxresdefault.jpg

These are listed in increasing order of size with “default.jpg” being the smallest and “maxresdefault.jpg” being the largest. Select the one that is most appropriate for your post. Keep in mind that WordPress will automatically generate a number of image sizes automatically for every featured image. So there’s no harm in choosing a larger one since you’re secure in the knowledge that WordPress will only serve up that which is necessary to preserve bandwidth and efficiency.

Crafting the Image URL

To get the image URL, we need three components:

  1. The video ID;
  2. The image size;;
  3. Image URL Templates.

We already have the first two. The final one is a standard URL structure of the form:

http://img.youtube.com/vi/[video-id]/[video-size]

Simply replace the section in bold and italics with the first two parameters you selected. So for our example, if we want the largest sized image for the Youtube video, we use the URL:

http://img.youtube.com/vi/Z9a4PvzlqoQ/maxresdefault.jpg

Here’s a screenshot of the medium sized image:

getting the associated image

Paste the crafted URL into the address bar of your browser and it will present you with the image size of your choice. Simply save this to your PC and we are ready to upload it as the featured image.

Setting the Featured Image

This should be the easiest part. In the WordPress visual editor, you will find the interface to add the featured image on the right hand side slightly after the text area. This will bring up the standard media library interface allowing you to upload the file directly from your hard drive. Once done, it will appear on the screen as shown below.

set the featured image

The WordPress plug-in repository has some examples of add-ons that claim to automate this process. But they have poor reviews and don’t seem to work properly. While it’s possible to automate the process, you may find it easier to just manually download the image and upload it yourself.

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.