How to Get Youtube Or Vimeo Video Title Description

How to Get Youtube Or Vimeo Video Title Description ?How to Get Vimeo Video Details?
How to Get Youtube Video Details?

Vimeo Video and YouTube Details In Javascript:

Step-1:

<div style="width:500px;">
<input type="text" id="txt_url"/><a href="javascript:void(0);" class="mybutton">Get</a>
</div>
<div style="width:500px;height:282px;border:2px dotted #c6d9e9;">
<img src="" width="500" height="282" class="thumbs"/>
</div>
<div style="width:500px;" class="duration">
<img src="http://cdn1.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/Times%20and%20Dates.png" height="30" width="30"/>
<span>:</span>
<span id="secnd">0 Second</span>
</div>
<div style="width:500px;min-height: 200px;margin-top: 5px;">
<div id="title" class="title_default">Title</div>
<div id="desc" class="desc_default">Description</div>

</div>

Step-2:

<style>
.title_default{
display:block;
float:left;
height: 50px;
width:100%;
background-color:#EB675E;
border: 1px solid #c6d9e9;
text-align:center;
line-height: 50px;
font-size: 25px;
color:#33454E;
font-family:"Comic Sans MS", cursive;
text-transform: uppercase;
overflow-y:scroll;
}
.title{
display:block;
float:left;
height: 50px;
background-color:#EB675E;
border: 1px solid #c6d9e9;
color:#33454E;
font-family:"Comic Sans MS", cursive;
overflow-y:scroll;
width:100%;
font-size: 13px;
}
.duration{
display:block;
float:left;
height: 30px;
text-align:center;
background-color:#EB675E;
border: 1px solid #c6d9e9;
color:#33454E;
font-family:"Comic Sans MS", cursive;
overflow-y:scroll;
width:100%;
font-size: 23px;
}
.desc_default{
display:block;
width:100%;
float:left;
height: 150px;
background-color:#EB675E;
border: 1px solid #c6d9e9;
text-align:center;
line-height: 100px;
font-size: 25px;
color:#33454E;
font-family:"Comic Sans MS", cursive;
text-transform: uppercase;
overflow-y:scroll;
}
.desc{
display:block;
width:100%;
float:left;
height: 150px;
background-color:#EB675E;
border: 1px solid #c6d9e9;
color:#33454E;
font-family:"Comic Sans MS", cursive;
overflow-y:scroll;
font-size: 13px;
}

</style>

Step-3:
<script type="text/javascript">
var vid=null;
$(document).ready(function(){
$('.mybutton').click(function(){
var obj=Url_parser($('#txt_url').val());
if(obj!=null)
{
if(obj.name == "youtube")
{
getYouTubeDetails(obj);
}else
{
var vimeoVideoID=obj.objectVal;
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
 $(".thumbs").attr('src', data[0].thumbnail_large);
 $('#desc').html(data[0].description).attr("class","desc");
$('#title').html(data[0].title).attr("class","title");
$('#secnd').html(data[0].duration + " Seconds");
});
}
}else
{
alert("Invalid");
}
});
});
function Url_parser(url)
{
var obj = new Object();
if(url.indexOf("youtu.be")!=-1)
{
 url=url.substring(url.lastIndexOf("/")+1,url.length);
obj.name = "youtube";
obj.objectVal = url;
}
else if(url.indexOf("www.youtube.com")!=-1)
{
url=url.split("v=")[1];
 if(url.lastIndexOf("&")!=-1)
 {
url=url.split("&")[0];
  }
obj.name = "youtube";
obj.objectVal = url;
}
else if(url.indexOf("vimeo.com")!=-1)
{
url=url.split("#")[0];
if(url.lastIndexOf("/")!=-1)
url=url.substring(url.lastIndexOf("/")+1,url.length);
obj.name = "vimeo";
obj.objectVal = url;
}
else
{
obj=null;
}
return obj;
}
function getYouTubeDetails(videoid){
vid=videoid.objectVal;
$.getScript('http://gdata.youtube.com/feeds/api/videos/' + videoid.objectVal+ '?v=2&alt=json-in-script&callback=youtubeDataCallback');
}

function youtubeDataCallback(data)
{
var desc = data.entry.media$group.media$description.$t.replace(/\n/g, '<br/>');
var tit = data.entry.title.$t;
var sec = data.entry.media$group.yt$duration.seconds;
$(".thumbs").attr('src', "http://i1.ytimg.com/vi/"+vid+"/0.jpg");
$('#desc').html(desc).attr("class","desc");
$('#title').html(tit).attr("class","title");
$('#secnd').html(data.entry.media$group.yt$duration.seconds + " Seconds");
}


</script>

See Demo

 Get Details

: 0 Second

Title

Description