Using YouTube oEmbed to get meta data

I was recently working on a site with user generated video content. All the videos were hosted on YouTube, and users could add a new video to the site, by submitting the URL.I’ve previously used the YouTube API to get data from YouTube, but it was messy at best.

WordPress makes it very easy to embed a video from YouTube on your site, as it will automatically convert a YouTube URL in your content into an embedded video. It does this using oEmbed, which got me thinking…

Using oEmbed to get data from YouTube

Unfortunately, all WordPress does, is convert the URL with the embedded video, where as I needed to get the title, author, thumbnail and embed code. Luckily, the YouTube oEmbed server can do just that. Given the URL for a YouTube video, it can return either a JSON or XML response which will include the following fields:

• provider_name – The name of the oEmbed provider. In this case it’s YouTube
• provider_url – The URL for the oEmbed provider. In this case it’s http://www.youtube.com/
• type – The format of the item at this URL. In this case it’s video
• title – The title of the video
• html – The HTML code for the iFrame to embed the video
• author_name – The username of the user who uploaded the video to YouTube
• author_url – The URL for the users profile
• height – The height of the video (as specified in the iFrame for the html property)
• width – The width of the image (as specified in the iFrame for the html property)
• thumbnail_url – The URL for the thumbnail image
• thumbnail_width – The width of the thumbnail image
• thumbnail_height – The height of the thumbnail image

Making the request

I use the following code snippet to get the results from within WordPress. You’ll notice I’m using wp_remote_get to make the actual requerst, but if you’re doing this from outside of WordPress, you can use file_get_contents or cURL.

// Get the original URL and encode it
$url			= 'http://www.youtube.com/watch?v=mYKA-VokOtA';
$encoded_url	= urlencode($url);

// Make the request to the oEmbed endpoint and capture the response
// They data we're interested in, is stored in the "body" property
$response        = wp_remote_get("http://www.youtube.com/oembed?format=json&url=$encoded_url");
$data            = json_decode($response['body']);

// This is the output it will generate
print_r($data);

stdClass Object
(
    [provider_url] => http://www.youtube.com/
    [title] => Timelapse // The City Limits
    [html] => <iframe width="480" height="270" src="http://www.youtube.com/embed/mYKA-VokOtA?fs=1&feature=oembed" frameborder="0" allowfullscreen></iframe>
    [author_name] => Tr1pTr0p
    [height] => 270
    [thumbnail_width] => 480
    [width] => 480
    [version] => 1.0
    [author_url] => http://www.youtube.com/user/Tr1pTr0p
    [provider_name] => YouTube
    [thumbnail_url] => http://i2.ytimg.com/vi/mYKA-VokOtA/hqdefault.jpg
    [type] => video
    [thumbnail_height] => 360
)

I then cache the data locally as post meta, to prevent having to make the request every time I need to display a video (there can be hundreds on a page at once)

Making the video bigger

If you want to make the video bigger, you can supply the maxwidth and maxheight parameters to the request, so the request line of code would look like this.

wp_remote_get("http://www.youtube.com/oembed?format=json&maxwidth=800&maxheight=600&url=$encoded_url");