19

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 !

AlexC
  • 9,657
  • 17
  • 64
  • 98
  • 1
    Have a look at this: [How to get thumbnail of YouTube video link using YouTube API](http://stackoverflow.com/questions/2068344/how-to-get-thumbnail-of-youtube-video-link-using-youtube-api/2108248#2108248). It says thumbnail but just about any publicly available info about a video can be fetched. – Salman A Nov 14 '12 at 06:09

4 Answers4

17

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

Community
  • 1
  • 1
easement
  • 6,119
  • 3
  • 29
  • 36
14

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"

Sorry-Im-a-N00b
  • 1,151
  • 2
  • 12
  • 20
4

Try this:

<script type="text/javascript">
function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul>'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    html.push('<li>', title, '</li>');
  }
  html.push('</ul>');
  document.getElementById('videos').innerHTML = html.join('');
}
</script>

and this in your body part:

<body>
<div id="videos">
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&format=5&callback=showMyVideos">
</script>
</div>
</body>
mellamokb
  • 56,094
  • 12
  • 110
  • 136
makeitmorehuman
  • 11,287
  • 3
  • 52
  • 76
-2

Try this for show Youtube feature picture in front of Jquery list view.

<script>
function showMyVideos(data) {
    var feed = data.feed;
    var entries = feed.entry || [];
    var html = ['<ul data-role="listview">'];
    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var title = entry.title.$t;
        var feature = entry.content.$t.substring(entry.content.$t.indexOf("src=")+5);
        feature = feature.substring(0,feature.indexOf('"'));
        html.push('<li><img src="' ,feature , '" />' , title , '<p>' , feature, '</p></li>');
    }
    html.push('</ul>');
    document.getElementById('videos').innerHTML = html.join('');
}
</script>

<div id="videos">
<script 
 src="http://gdata.youtube.com/feeds/users/mostviewcomedy/uploads?alt=json-in-script&format=5&callback=showMyVideos">
</script>
</div>
Supot Sawangpiriyakij
  • 101
  • 4
  • this is bad because you're still fetching all of the data, you want to be only fetching the right data, as in do all the filtering through the request params, not client side – Elise Chant Sep 13 '14 at 23:59