How do I check if a video exists on YouTube, in client side

Question

I am doing validation for my Youtube url text field.

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

It works for valid url but it does not work for invalid url. All I see is 404 error in network console

Is there a way to check if url exist in 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

Solution 1

@hitesh, Please remove the datatype:'jsonp' from the ajax request. This way you'll get json string if the video id is available and if its not available then the ajax error callback would be invoked. I tried on your fiddle and its working. Try 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"); });

Solution 2

For those who are 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 may visit the doc page here.

Solution 3

This is a known problem, see

jQuery Ajax 404 Handling

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

Solution 4

somebody already had the same problem as you, you cannot check for a 404 error when doing cross-domain requests. You should handle it via a timeout.

JSONP request error handling

Solution 5

From $.ajax docs:

error

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

View more solutions