How to check if a video exists on YouTube on the client side

Question

I am checking for a Youtube URL text box .

I need to check if the Youtube url does not exist, I should throw an error, I followed this answer and created jsfiddle to check it.

It works for a valid URL, but does not work for an invalid URL. All I see is a 404 error in the network console

Is there a way to check if the url exists on the client side using JavaScript and jQuery .

here is my code:

 var videoID = 'kn8yzJITdvI';//not working //var videoID = 'p4kIwWHP8Vc';//working $.ajax({ url: "https://gdata.youtube.com/feeds/api/videos/" + videoID + "?v=2&alt=json", dataType: "jsonp", success: function(data) { console.log(data) $("#result").text(data); }, error: function(jqXHR, textStatus, errorThrown) { // Handle errors here alert('ERRORS: ' + textStatus); } }); 

JSfiddle link

Answer 1

@hitesh, remove the data type: "jsonp" from the ajax request. This way you will get json string if video id is available and if it is not available, ajax error callback will be called. I tried your violin and its work. Try it like this -

 //var videoID = 'kn8yzJITdvI';//not working var videoID = 'p4kIwWHP8Vc';//working $.ajax({ url: "https://gdata.youtube.com/feeds/api/videos/" + videoID + "?v=2&alt=json", //dataType: "jsonp", success: function(data) { console.log(data) $("#result").text(data); }, error: function(jqXHR, textStatus, errorThrown) { // Handle errors here alert('ERRORS: ' + textStatus); } }); 

Here is another short implementation for the solution you need -

 //var videoID = 'kn8yzJITdvI';//not working var videoID = 'p4kIwWHP8Vc';//working $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+videoID+'?v=2&alt=jsonc',function(data,status,xhr){ alert(data.data.title); }).error(function() { alert("error"); }); 

Answer 2

For those looking for a solution using the V3 API, you can do the following:

 var videoID = 'the_youtube_video_id'; $.getJSON('https://www.googleapis.com/youtube/v3/videos?id=' + videoID + "&key=INSERT_YOUR_API_KEY_HERE&part=COMMA_DELIMITED_VALUE", function (data, status, xhr) { if (data.items.length > 0) alert('It is there!') else alert('Are you sure you about the Id?'); console.log(status); console.log(xhr); }).error(function (xhr, errorType, exception) { var errorMessage = exception || xhr.statusText || xhr.responseText; alert(errorMessage); }); 

For a list of valid parts you can visit the document page .

Answer 3

This is a known issue, see

jQuery Ajax 404 Processing

http://forum.jquery.com/topic/jquery-ajax-with-datatype-jsonp-will-not-use-error-callback-if-request-fails

Answer 4

From $. ajax docs :

Error

Note. This handler is not called for cross-domain script and cross-domain JSONP requests.

Answer 5

Someone already had the same problem as you, you cannot check the 404 error when executing cross-domain requests. You must process it through a timeout.

JSONP request error handling

Answer 6

Try this on the client side:

 //here, oABCD01234 is YouTube id $.ajax({ type: 'HEAD', url: 'http://gdata.youtube.com/feeds/api/videos/oABCD01234', success: function() { //it exists! }, error: function(jqXhr) { if(jqXhr.status == 400) { //it doesn't exist } } });