Get youtube video's title with jQuery using youtube api

Question

What is the easiest way to get the title from the youtybe video , for example this video title :

http://www.youtube.com/watch?v=Wp7B81Kx66o

Thanks !

Answer 1

Use jQuery's JSON call to the YouTube API to get the results back and then use jQuery to put the results where you want them. You can use firebug's NET tab to make sure you requests/respoonses are coming back correctly and then use console.log() to make sure you parsed the response correctly.

eg. URL:

GET https://gdata.youtube.com/feeds/api/videos/(the-video-id)?v=2&alt=json

More info:

YouTube API for a specific video

Developer's Guide: JSON / JavaScript

Answer 2

This is a overhauled implementation of the original answer provided by @easement using the current v3 YouTube Data API.

In order to make a request to the API, you can use jQuery's getJSON() call to request the title from YouTube via AJAX. YouTube's v3 Data API provides 3 endpoints that can be used to get the title:

1. Snippet Title - The video's title. The property value has a maximum length of 100 characters and may contain all valid UTF-8 characters except < and >.
2. Snippet Localized Title - The localized video title, again with the maximum length described above
3. Full Localized Title - The full length localized video title.

Sample Implementation using Snippet Title

var yt_api_key = {your YouTube api key},
  yt_video_id = {your YouTube video id},
  yt_snippet_endpoint = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + yt_video_id + "&key=" + yt_api_key;

var jqxhr = $.getJSON(yt_snippet_endpoint)
  .done(function(data) {
    console.log("second success callback");
    var title = getTitle(data);
    // do something with title here
  })
  .fail(function() {
    console.log("error, see network tab for response details");
  });

function getTitle(snippet_json_data){
  var title = snippet_json_data.title;
  return title;
}

Debugging tip: You can use developer tools to view Network requests (i.e Chrome's developer tools or Firefox's Firebug) to make sure you requests/responses are coming back correctly and then use console.log() to log the returned data to make sure you parsed the response correctly.

Additional Reading: YouTube Data API "getting started"