1

Trying to do a few things in my new Wordpress Youtube niche theme. I have a tab in my theme for the user to input the Youtube watch?v=xxxxxxxxxxx id. When they enter the xxxxxxxxxxx url it outputs the video, showing 16 posts per tab via the 'loop' query.

Working example here

I have looked into this Google developer console api thing... and it is complete gibberish to me. I'm using custom post types for the 4 categories youll see on my site. only "Comedy" is populated right now.

NEW EDIT: THIS WORKS. Thank you all who have helped me figure this out!

<?php
  $new_query = new WP_Query();
  $new_query->query( array('post_type' => array( 'comedy' ), 'orderby' => 'title', 'order' => 'asc','showposts' => 16, 'paged'=>$paged ));

  while ($new_query->have_posts()) : $new_query->the_post();

  $url = get_post_meta ($post->ID, 'comedy_url', $single = true);

  include(TEMPLATEPATH . '/library/variables.php');

  $code = 'http://www.youtube.com/watch?v=' . $url;
  $json = file_get_contents('http://www.youtube.com/oembed?url='.urlencode($code));
  $video = json_decode($json);
?>

<img src="<?php echo $video->thumbnail_url ?>" />

Upon pulling the thumbnail some of you may notice BLACK BORDERS on the top and bottom of your thumbnail. To fix this use the code below:

<a href="<? if($code) {?><?php echo $code; ?><? } ?>">
  <div class="yt-thumbnail" style="background:url('<?php echo $video->thumbnail_url ?>') center no-repeat;"></div>
</a>

// in your css file 
.yt-thumbnail{
    height: 164px;
    width: 300px;
    background-size: 300px 220px;
}
0

1 Answer 1

1

You can use the oEmbed API to get thumbnail, uploader name and title. All you need is to encode the URL of the video, for example:

http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9FOWI6Zftpg

This will return a JSON response:

{
  "provider_name":"YouTube",
  "version":"1.0",
  "author_url":"http:\/\/www.youtube.com\/user\/NScherzingerVEVO",
  "type":"video",
  "author_name":"NScherzingerVEVO",
  "thumbnail_url":"http:\/\/i1.ytimg.com\/vi\/9FOWI6Zftpg\/hqdefault.jpg",
  "provider_url":"http:\/\/www.youtube.com\/",
  "title":"Nicole Scherzinger - Your Love",
  "height":270,
  "width":480,
  "thumbnail_height":360,
  "html":"\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.com\/embed\/9FOWI6Zftpg?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
  "thumbnail_width":480
}

Getting the view count is a bit more difficult, see the answers here for details.

Edit:

Here is an example how to get the thumbnail in PHP:

<?php
  $url = 'http://www.youtube.com/watch?v=9FOWI6Zftpg';
  $json = file_get_contents('http://www.youtube.com/oembed?url='.urlencode($url));
  $video = json_decode($json);
?>
<img src="<?php echo $video->thumbnail_url ?>" />
4
  • This is my misunderstanding... how do I grab the JSON file off ftp? I assume I can do: http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%<? if($url) {?><?php echo $url; ?><? } ?> But how would I go about pulling the thumbnail and calling it? Jun 15, 2014 at 10:26
  • Found this as well... looking into it. Jun 15, 2014 at 10:30
  • Added an example to my answer. Jun 15, 2014 at 10:33
  • I was able to get this working by changing $url = 'http://www.youtube.com/watch?v=9FOWI6Zftpg'; to $code = 'http://www.youtube.com/watch?v=' . $url;, so it still falls in line with my custom fields. Thanks! Jun 15, 2014 at 16:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.