WordPress.org

Ready to get started?Download WordPress

Forums

How to Embed YouTube Thumbnails? (6 posts)

  1. OfficialRedneck
    Member
    Posted 6 years ago #

    Is it possible to have a small thumbnail preview of YouTube videos in your post, so that when people view the post on the Home page all they see a small thumbnail preview of the video (that way the whole video doesn't load on the Home page). Almost like using the <!--more--> tag for a long post.

  2. iPaulPro
    Member
    Posted 6 years ago #

    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="http://www.youtube.com/v/uug6TjvRJaE&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://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="http://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 http://s2.ytimg.com/vi/VIDEO_ID/default.jpg (where 'video_id' is the youtube id - eg: http://s2.ytimg.com/vi/uug6TjvRJaE/default.jpg)

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

  3. iPaulPro
    Member
    Posted 6 years ago #

    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="http://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; ?>
  4. iPaulPro
    Member
    Posted 6 years ago #

    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="http://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
  5. drumat5280
    Member
    Posted 5 years ago #

    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=\"http://www.youtube.com/v/###URL###\" width=\"".YOUTUBE_WIDTH."\" height=\"".YOUTUBE_HEIGHT."\" wmode=\"transparent\"><param name=\"movie\" value=\"http://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="http://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; ?>
  6. drumat5280
    Member
    Posted 5 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.