How to Embed YouTube Thumbnails?

Posts as Youtube Thumbnails

You can use the custom fields to accomplish this.

First, create a custom field in one of your posts. Name the ‘Key’ somethings like ‘video_id’ (without quotes) and in the ‘Value’ field, put the ID of the youtube video:

So if your embed code looks like this:

<object width="425" height="355"><param name="movie" value="https://www.youtube.com/v/uug6TjvRJaE&hl=en"></param><param name="wmode" value="transparent"></param><embed src="https://www.youtube.com/v/uug6TjvRJaE&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

the Custom Field would be Key=video_id and Value= uug6TjvRJaE

After creating the custom field, create a new page template (eg. video_thumbs.php) NOTE: you can alter your index.php file directly, but I would advise testing on a page first.

In that new page, copy and paste all of the contents of your index.php. Then replace the loop with this code:

<?php if (have_posts()) : ?>
<?php
// this is where the module begins
query_posts('showposts=1&cat=199'); ?> //change the showposts number to the number of posts that you want to appear, and change cat=199 to your category number (or remove), which you can find out by going to Manage > Categories
<?php while (have_posts()) : the_post(); ?>
<div class="thumbnails">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="https://s2.ytimg.com/vi/<?php
// this is where the custom field prints images for each post
$values = get_post_custom_values("video_id"); echo $values[0]; ?>/default.jpg" alt="<?php the_title(); ?> Thumbnail" /></a>
<p class="title"><a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a>
</div>
<?php endwhile; ?>

Only replace the code between <?php if (have_posts()) : ?> and <?php endwhile; ?>

Save and upload to your server. Then create a new page and set it to use the video_thumbs.php template. Navigate to this page and viola!

You must add a ‘video_id’ custom field to any post that you wish to have a thumbnail.

With the example above each entry will be given a div class of ‘thumbnails’. You can call that whatever you want, as well as style it appropriately.

Of course, when you have your desired results you could use ‘is_home’ conditional tags to incorporate this into your index.php file.

This works for me. Just figured this out for myself and I was so happy that I had to share. I knew people would love to hear my solution.

And just so you know, the link to a thumbnail for any youtube video is https://s2.ytimg.com/vi/VIDEO_ID/default.jpg (where ‘video_id’ is the youtube id – eg: https://s2.ytimg.com/vi/uug6TjvRJaE/default.jpg)

Let me know how it goes. May end up turning this into a simple plugin.

Revised to allow pagination:

<?php if (have_posts()) : ?>

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('showposts=6' . '&paged=' . $paged . '&cat=4');
$wp_query->is_archive = true; $wp_query->is_home = false;
?>

<?php while (have_posts()) : the_post(); ?>
<div class="thumbnails">
<p class="title" id="post-<?php the_ID(); ?>-thumb"><a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="https://s2.ytimg.com/vi/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values("video_id"); echo $values[0]; ?>/default.jpg" alt="<?php the_title(); ?> Thumbnail" /></a>
<?php the_category(' ') ?>

<small><?php if(function_exists('the_ratings')) { the_ratings(); } ?></small>
</div>

<?php endwhile; ?>
<div class="navigation">
                <div class="alignright"><?php next_posts_link('Next') ?></div>
		<div class="alignleft"><?php previous_posts_link('Previous') ?></div>
</div>
</div>

	<?php endif; ?>

Sorry I’m new to giving advice. If you want code to copy and paste for the loop, here it is (without my site-specific code)

<?php if (have_posts()) : ?>

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('showposts=6' . '&paged=' . $paged . '&cat=4');
$wp_query->is_archive = true; $wp_query->is_home = false;
?>

<?php while (have_posts()) : the_post(); ?>

<div class="thumbnails" id="post-<?php the_ID(); ?>-thumb">

 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="https://s2.ytimg.com/vi/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values("video_id"); echo $values[0]; ?>/default.jpg" alt="<?php the_title(); ?> Thumbnail" /></a>

<p class="thumb_title"><a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a>

<?php endwhile; ?>

  <div class="navigation">
                <div class="alignright"><?php next_posts_link('Next') ?></div>
		<div class="alignleft"><?php previous_posts_link('Previous') ?></div>
  </div>
</div>

	<?php endif; ?>

CSS that needs styling with this code:

• .thumbnails
• .thumb_title
• .navigation
• .alignright
• .alignleft

Paul,

Thanks for your solutions.

I have a slightly different problem, I am using a video plugin to display my YouTube videos and would like a thumbnail as well.

Here is the code from the plugin:

// Youtube Code

define("YOUTUBE_WIDTH", 320); // default width
define("YOUTUBE_HEIGHT", 265); // default height
define("YOUTUBE_REGEXP", "/\[youtube (:print:+)\]/");
define("YOUTUBE_TARGET", "<object type=\"application/x-shockwave-flash\" data=\"https://www.youtube.com/v/###URL###\" width=\"".YOUTUBE_WIDTH."\" height=\"".YOUTUBE_HEIGHT."\" wmode=\"transparent\"><param name=\"movie\" value=\"https://www.youtube.com/v/###URL###\" /></object>");

function youtube_plugin_callback($match)
{
	$output = YOUTUBE_TARGET;
	$output = str_replace("###URL###", $match[1], $output);
	return ($output);
}

function youtube_plugin($content)
{
	return (preg_replace_callback(YOUTUBE_REGEXP, 'youtube_plugin_callback', $content));
}

add_filter('the_content', 'youtube_plugin',1);
add_filter('comment_text', 'youtube_plugin');

Here is what I am trying that is not working:

<?php while (have_posts()) : the_post(); ?>
			<img  src="https://i.ytimg.com/vi/<?php echo URL; ?>/default.jpg">
			<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
			<?php the_excerpt(); ?>
		<?php endwhile; ?>

Here is a link to a video I did on my issue that might make it easier to understand:
https://bit.ly/7GYzq