Get Youtube Video Informations Without Refreshing The Page With jQuery

Posted under :
Download the script Check the demo

This script will allow you to check a youtube video if its exist and retreive the general informations like the Title, the Video ID, the Video Image without refreshing the page using jQuery via youtube api , take a look …

First of all we add an input text where we can paste the full link of the video and a button to allow the script to search an retreive the video information

<input id="vtitle" type="text" value="" placeholder="Lien video youtube" />
<div id="btvget" class="btn-vid"  >Get the Video</div>

Then we prepare a place where we will show the title, the video and the rest of data we will collect.
In this code we will use the h1 with the .vttl class for the title, the div with .theVideo class will show the video with it iframe,

<h1 class="vttl"></h1>
<div class="theVideo"></div>

<div class="video-info">
    Full url : <span class="vid-link"></span> <br>
    Video ID : <span class="vttl"></span><br>
    Video title : <span class="videoid"></span> <br>
    Image SRC : <span class="img-src"></span><br>
</div>

Now, we can go for the js part with jQuery, which it will do all the job
I’ll try to explain the functions used in the js part

So, i will start with controlling the input which we use to put the full link from youtube, in this case the script execute when the value of the input change so, we can say we dont need of the button :)

$(function(){ 
    $('#vtitle').change(function(){ videoInfo(); });
});

In the change of the value we call the videoInfo() function to retreive the video information, this function make the call of 2 other functions that i will explain 😉

function videoInfo() {
    var vidid = videoID($('#vtitle').val());
    $.ajax({
        url: "http://gdata.youtube.com/feeds/api/videos/"+vidid+"?v=2&alt=json",
        error : erroryt('notFound'),
        dataType: "jsonp",
        success: function (data) {
            parseresults(data)
        }
    });
}

In the videoInfo function we call the the youtube api using the cleaned video ID, which we stocked in a variable called vidid, in the first line of that function, we used another function called videoID() for cleaning the url and search for the video ID

function videoID(url){
    if(url.indexOf('?') === -1)
        return null;
    var query = decodeURI(url).split('?')[1];
    var params = query.split('&');      
    for(var i=0,l = params.length;i<l;i++)
    if(params[i].indexOf('v=') === 0)
    return params[i].replace('v=','');
    return null;
}

Using the videoInfo() function, we call the youtube api to get the different inforation, if the result is success (which the video exist), we parse the results using parseresults() function

function videoID(url){
    if(url.indexOf('?') === -1)
        return null;
    var query = decodeURI(url).split('?')[1];
    var params = query.split('&');      
    for(var i=0,l = params.length;i<l;i++)
    if(params[i].indexOf('v=') === 0)
    return params[i].replace('v=','');
    return null;
}


Be notified for new scripts