Get Youtube information via JSON for single video (not feed) in Javascript

Question

So I am trying to get information from a single youtube video via in the JSON format. Like title description category, ect whatever I can get besides the comments. I am trying to do this in Javascript. I noticed the link below but all of their examples are how to get video information from feeds. I would like to get the information from a single video assuming i know its ID.

https://developers.google.com/youtube/2.0/developers_guide_json

I was also looking at this Stackoverflow Question but I have an issue with the get request it says "test.js (line 10) GET http://gdata.youtube.com/feeds/api/videos/VA770w...v=2&alt=json-in-script&callback=listInfo

200 OK 9ms"

In brief, if i have a single youtube videos id like VA770wpLX-Q, what would the url look like to get that videos information in JSON?

Thank you

hey jquery wasnt my issue i just couldnt figure out the right url or pattern to get the json data. The answer below pointed me in the right direction — Frank Visaggio
– Frank Visaggio, Commented Nov 4, 2012 at 2:45

Alexufo · Accepted Answer · 2018-07-04 21:13:20Z

72

UPDATED 2018

API v2 deprecated. New youtube api v3 works only with developer token and has limitation for free connections.

You can get JSON without API:

http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=ojCkgU5XGdg&format=json

Or xml

http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=ojCkgU5XGdg&format=xml

new 2018 json response has

{
  "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/ojCkgU5XGdg?feature=oembed\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
  "title": "Creativity and Drugs (Eng Sub)",
  "thumbnail_height": 360,
  "provider_name": "YouTube",
  "author_url": "https://www.youtube.com/user/serebniti",
  "thumbnail_width": 480,
  "height": 270,
  "provider_url": "https://www.youtube.com/",
  "type": "video",
  "width": 480,
  "version": "1.0",
  "author_name": "serebniti",
  "thumbnail_url": "https://i.ytimg.com/vi/ojCkgU5XGdg/hqdefault.jpg"
}

Thumbs:

hqdefault.jpg has less quality but always exist.

http://img.youtube.com/vi/ojCkgU5XGdg/hqdefault.jpg

http://img.youtube.com/vi/ojCkgU5XGdg/sddefault.jpg

Max size

https://i.ytimg.com/vi/ojCkgU5XGdg/maxresdefault.jpg

Mini thumbs:

http://img.youtube.com/vi/ojCkgU5XGdg/0.jpg
http://img.youtube.com/vi/ojCkgU5XGdg/1.jpg
http://img.youtube.com/vi/ojCkgU5XGdg/2.jpg
http://img.youtube.com/vi/ojCkgU5XGdg/3.jpg

Annotations

http://www.youtube.com/annotations_invideo?cap_hist=1&video_id=ojCkgU5XGdg

parse mobile page 16kb

https://m.youtube.com/watch?v=ojCkgU5XGdg

don't forget change user agent to iOS / Safari 7

also

http://www.youtube.com/get_video_info?html5=1&video_id=ojCkgU5XGdg

also how embed youtube live

https://www.youtube.com/embed/live_stream?channel=UCkA21M22vGK9GtAvq3DvSlA

Where UCkA21M22vGK9GtAvq3DvSlA is your channel id. You can find it inside youtube account on "My Channel" link.

Live thumb

https://i.ytimg.com/vi/W-fSCPrYSL8/hqdefault_live.jpg

edited Jul 4, 2018 at 21:13

answered Apr 23, 2014 at 19:43

Alexufo

1,8331 gold badge17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BlaM Over a year ago

Sadly oembed does not support jsonp (i.e. with callback), so using it cross-domain in the browser will be a problem.

Alexufo Over a year ago

@BlaM i can load it with jsonp learn.jquery.com/ajax/working-with-jsonp but jQuery cant parse response. :-(

BlaM Over a year ago

That's what I meant. The YouTube server does not support to send JSONP for those oembeds.

machineaddict Over a year ago

@Alexufo you can use your website backend to proxy that connection. this way it will work

EricZhao Over a year ago

However there is no duration info

|

Rafael Moni · Accepted Answer · 2015-05-06 20:29:40Z

38

UPDATE MAY/2015:

This solution doesn't work properly, YouTube API v2 is in process to be discontinued soon.

More info at: https://www.youtube.com/devicesupport

Try something like this:

var video_id='VA770wpLX-Q';

$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+video_id+'?v=2&alt=jsonc',function(data,status,xhr){
    alert(data.data.title);
    // data contains the JSON-Object below
});

Demo: http://jsfiddle.net/wqwxg/

The returned JSON looks like this:

{
    "apiVersion": "2.1",
    "data": {
        "id": "VA770wpLX-Q",
        "uploaded": "2011-02-24T22:31:02.000Z",
        "updated": "2012-04-08T21:37:06.000Z",
        "uploader": "drdrevevo",
        "category": "Music",
        "title": "Dr. Dre - I Need A Doctor (Explicit) ft. Eminem, Skylar Grey",
        "description": "Music video by Dr. Dre performing I Need A Doctor featuring Eminem and Skylar Grey (Explicit). © 2011 Aftermath Records",
        "tags": ["Dr", "Dre", "Eminem", "New", "Song", "Skylar", "Grey", "GRAMMYs", "Dr.", "Need", "Doctor", "video", "Eazy", "N.W.A.", "NWA", "easy", "drdre", "and", "em"],
        "thumbnail": {
            "sqDefault": "http://i.ytimg.com/vi/VA770wpLX-Q/default.jpg",
            "hqDefault": "http://i.ytimg.com/vi/VA770wpLX-Q/hqdefault.jpg"
        },
        "player": {
            "default": "http://www.youtube.com/watch?v=VA770wpLX-Q&feature=youtube_gdata_player"
        },
        "content": {
            "5": "http://www.youtube.com/v/VA770wpLX-Q?version=3&f=videos&app=youtube_gdata"
        },
        "duration": 457,
        "aspectRatio": "widescreen",
        "rating": 4.902695,
        "likeCount": "430519",
        "ratingCount": 441253,
        "viewCount": 88270796,
        "favoriteCount": 306556,
        "commentCount": 270597,
        "status": {
            "value": "restricted",
            "reason": "requesterRegion"
        },
        "restrictions": [{
            "type": "country",
            "relationship": "deny",
            "countries": "DE"
        }],
        "accessControl": {
            "comment": "allowed",
            "commentVote": "allowed",
            "videoRespond": "allowed",
            "rate": "allowed",
            "embed": "allowed",
            "list": "allowed",
            "autoPlay": "denied",
            "syndicate": "allowed"
        }
    }
}

edited May 6, 2015 at 20:29

Rafael Moni

6661 gold badge10 silver badges22 bronze badges

answered Apr 8, 2012 at 21:50

stewe

42.8k13 gold badges82 silver badges77 bronze badges

3 Comments

Frank Visaggio Over a year ago

url = "gdata.youtube.com/feeds/api/videos/NWHfY_lvKIQ?v=2&alt=json" thats how you do it. NWHfY_lvKIQ is the ID of the video. after that you can do a $.getJSON(url, function(data){ and get the json from there

Tolen Over a year ago

I want to ask how to get the duration in format HH:MM:ss because in json file it is in the Seconds ,is there any function can do this already!!

Jasom Dotnet Over a year ago

Not supported anymore "error":{"code":410,"message":"No longer available"

rsp · Accepted Answer · 2016-05-06 09:01:16Z

20

Problem

YouTube API doesn't support JSONP as it should - see Issue 4329: oEmbed callback for JSONP. Also, YouTube Data API v2 is deprecated.

Solution

You can use the Noembed service to get oEmbed data with JSONP for YouTube videos.

Bonus

no API keys are needed
no server-side proxy is required

Example

For your VA770wpLX-Q video, you can try a link like this:

https://noembed.com/embed?url=http://www.youtube.com/watch?v=VA770wpLX-Q

Or this for JSONP:

https://noembed.com/embed?callback=example&url=http://www.youtube.com/watch?v=VA770wpLX-Q

Those links have a standard URL of a YouTube video passed as the url parameter. It works not only with YouTube but also with Vimeo and other sites with URLs like:

https://noembed.com/embed?url=https://vimeo.com/45196609

Demo

Here is a simple example using jQuery:

var id = 'VA770wpLX-Q';
var url = 'https://www.youtube.com/watch?v=' + id;

$.getJSON('https://noembed.com/embed',
    {format: 'json', url: url}, function (data) {
    alert(data.title);
});

See: DEMO on JS Bin.

Other options

Embedly (commercial service, free up to 5000 URLs/month)
Oohembed (update: now bought by Embedly, but the source is available)
AutoEmbed (update: seems to be down or discontinued)

More info

4 Comments

rsp Over a year ago

@BobSinclar Thanks. It also works for Vimeo and other sites, see: noembed.com/#supported-sites

rsp Over a year ago

@KenSharp If the first party can't be trusted (API v3 doesn't support JSONP and API v2 is deprecated) then we can either tell the original poster that it can't be done or we can use a third party service that works for what was asked in the question. But if you have a better solution then please post an answer.

jakob.j Over a year ago

Is it known how Noembed does it?

yckart Over a year ago

@jakob.j It's open source. So, yes.

Mario Gonzales Flores · Accepted Answer · 2015-08-25 15:34:35Z

10

in v3:

$.getJSON('https://www.googleapis.com/youtube/v3/videos?id={videoId}&key={myApiKey}&part=snippet&callback=?',function(data){

 if (typeof(data.items[0]) != "undefined") {
     console.log('video exists ' + data.items[0].snippet.title);
   } else {
     console.log('video not exists');
 }   
});

In response a @Jonathan via server side, using PHP and CURL:

$url = "https://www.googleapis.com/youtube/v3/videos?id=".$videoId."&key=".$miApikey."&part=snippet";
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$output=curl_exec($ch);                 
$response = json_decode($output, TRUE);
print_r($response);

edited Aug 25, 2015 at 15:34

answered Jul 24, 2014 at 21:29

Mario Gonzales Flores

7057 silver badges16 bronze badges

2 Comments

Jonathan Over a year ago

doesn't seem a good idea to show your key like that. It is better to call your server side script by ajax that fetchs that url

Ken Sharp Over a year ago

@Jonathan Google provides an API key like this so that you can do it publicly. The restrictions are set Google-side. This is the correct way to do what is needed. The API key cannot be used outside of the domains that you allow via the console. It's all made very clear in the console.

Collectives™ on Stack Overflow

Get Youtube information via JSON for single video (not feed) in Javascript

4 Answers 4

6 Comments

3 Comments

Problem

Solution

Bonus

Example

Demo

Other options

More info

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

Problem

Solution

Bonus

Example

Demo

Other options

More info

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related