FETCHING YOUTUBE
VIDEO CHANNEL PROGRAMATICALLY
USING JSON AND JQUERY USING
YOUTUBE
DATA API
LET'S GET STARTED
First of all you have to register
into the below link to access Data API
(If
you already have Gmail account then directly Register it ,otherwise create google
account)
In the sidebar on the left,
expand APIs & auth. Next, click APIs. In the
list of APIs, make sure the status is ON for the YouTube
Data API v3.
Click
YouTube Data API
YouTube Data Api Must be Enable
In the sidebar on the left,
select Credentials.
The API supports two types of
credentials. Create whichever credentials are appropriate for your
project:
OAuth 2.0: Your
application must send an OAuth 2.0 token with any request that
accesses private user data. Your application sends a client ID
and, possibly, a client secret to obtain a token. You can
generate OAuth 2.0 credentials for web applications, service
accounts, or installed applications.
API keys: A request
that does not provide an OAuth 2.0 token must send an API key.
The key identifies your project and provides API access, quota,
and reports.
Click on Credential and select
Create new Key in Public API Access
Without Filling any IP on the
Text-box will access to all IP otherwise you can provide it.
Then go to API (there will be
three option after enabling Youtube Data API-Learn More,Explore
this API,View reports in API Console)
Click on Explore this API
In
the part=snippet
,channelD=some
channelID(ex- UcaOR83TrtZEpOXJZdtnZtqA)
And
Fill various filter According to the requirement
And
click on Execute ,it
then
you will find the URL
Ex-https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCaOR83TrtZEpOXJZdtnZtqA&key={YOUR_API_KEY}
And
one Response will be generated like below that is in JSON format
JSON DATA RESPONSE
{
"kind": "youtube#searchListResponse",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/0f_A59Ltuor31NjG3FFeIStM6Lc\"",
"nextPageToken": "CAUQAA",
"pageInfo": {
"totalResults": 1484,
"resultsPerPage": 5
},
"items": [
{
"kind": "youtube#searchResult",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/eXmUJRwHXNgBWdw4xWEh0eATTWs\"",
"id": {
"kind": "youtube#video",
"videoId": "APJxwxZuA0E"
},
"snippet": {
"publishedAt": "2012-04-05T10:08:52.000Z",
"channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
"title": "Nenjodu Cherthu : Yuvvh Official HD Full Song",
"description": "Watch Nenjodu Cherthu Official Full Song Video from
the Album Yuvvh Song : Nenjodu Cherthu Album : Yuvvh Singer : Alaap
Raju Music by : Sachin and ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/APJxwxZuA0E/default.jpg"
},
"medium": {
"url": "https://i.ytimg.com/vi/APJxwxZuA0E/mqdefault.jpg"
},
"high": {
"url": "https://i.ytimg.com/vi/APJxwxZuA0E/hqdefault.jpg"
}
},
"channelTitle": "sonymusicindiaSME",
"liveBroadcastContent": "none"
}
},
{
"kind": "youtube#searchResult",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/g4DgFSHepQIbXIGb42_Grze4IkQ\"",
"id": {
"kind": "youtube#video",
"videoId": "snb-h8zKE6M"
},
"snippet": {
"publishedAt": "2015-01-27T04:30:59.000Z",
"channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
"title": "Ammy Virk - Taara | Album - Shayar |
Latest Punjabi Song 2015",
"description": "Presenting \"Taara\" - The Love Song of season
by Ammy Virk. Song has been penned down by Jaani & Music/
Composition has been given by ace music ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/snb-h8zKE6M/default.jpg"
},
"medium": {
"url": "https://i.ytimg.com/vi/snb-h8zKE6M/mqdefault.jpg"
},
"high": {
"url": "https://i.ytimg.com/vi/snb-h8zKE6M/hqdefault.jpg"
}
},
"channelTitle": "sonymusicindiaSME",
"liveBroadcastContent": "none"
}
},
{
"kind": "youtube#searchResult",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/nuZK9fIch8-JD2zwMCt-N34xEm8\"",
"id": {
"kind": "youtube#video",
"videoId": "WxjQ0TjOOQI"
},
"snippet": {
"publishedAt": "2014-09-29T11:01:19.000Z",
"channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
"title": "A. R. Rahman, Kapil Sibal,
Lata Mangeshkar – Laadli | Raunaq",
"description": "Dedicated to #VogueEmpower - 'Laadli' is the
Raunaq of Life and reflects the theme of women's empowerment.
Kapil Sibal's moving poetry is set to melodious ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/WxjQ0TjOOQI/default.jpg"
},
"medium": {
"url": "https://i.ytimg.com/vi/WxjQ0TjOOQI/mqdefault.jpg"
},
"high": {
"url": "https://i.ytimg.com/vi/WxjQ0TjOOQI/hqdefault.jpg"
}
},
"channelTitle": "sonymusicindiaSME",
"liveBroadcastContent": "none"
}
},
{
"kind": "youtube#searchResult",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/OBob1tFMQXwTz3itkr9ZXNXl5Is\"",
"id": {
"kind": "youtube#video",
"videoId": "YR12Z8f1Dh8"
},
"snippet": {
"publishedAt": "2011-11-16T19:17:03.000Z",
"channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
"title": "Why This Kolaveri Di Official Video | Dhanush, Anirudh",
"description": "Check out the exclusive video, shot during the
recording of the song \"why this kolaveri di\" with the music composer
Anirudh,Dhanush,Shruti Hassan, Aishwarya ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/YR12Z8f1Dh8/default.jpg"
},
"medium": {
"url": "https://i.ytimg.com/vi/YR12Z8f1Dh8/mqdefault.jpg"
},
"high": {
"url": "https://i.ytimg.com/vi/YR12Z8f1Dh8/hqdefault.jpg"
}
},
"channelTitle": "sonymusicindiaSME",
"liveBroadcastContent": "none"
}
},
{
"kind": "youtube#searchResult",
"etag": "\"NO6QTeg0-3ShswIeqLchQ_mzWJs/TJwMquQUFAR55NcpDz7p33NgO9Q\"",
"id": {
"kind": "youtube#video",
"videoId": "hG6uc9icebI"
},
"snippet": {
"publishedAt": "2015-04-03T18:30:14.000Z",
"channelId": "UC56gTxNs4f9xZ7Pa2i5xNzg",
"title": "OK Kanmani | OK Bangaram - Maula Wa Sallim Lyric Video |
A.R. Rahman, Mani Ratnam",
"description": "Listen to Maula Wa Sallim in A.R. Ameen's voice from
OK Kanmani / OK Bangaram. Song Name - Maula Wa Sallim Movie -
Ok Kanmani / OK Bangaram Singer ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/hG6uc9icebI/default.jpg"
},
"medium": {
"url": "https://i.ytimg.com/vi/hG6uc9icebI/mqdefault.jpg"
},
"high": {
"url": "https://i.ytimg.com/vi/hG6uc9icebI/hqdefault.jpg"
}
},
"channelTitle": "sonymusicindiaSME",
"liveBroadcastContent": "none"
}
}
]
}
Paste the URL by editing Your_API_Key to your original Key
on the browser
Same Result you will Get As A JSON formet
Then you need to fetch those results by using jquery
In cq you can fetch the channelId,Api-Key and no of results
throug dialog as shown below...
<head>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{
$(window).load(function(value)
{
var yurl = $("#yurl").val();
alert(yurl);
var request = $.ajax({
url: yurl,
method:'GET',
dataType:'json',
success: function(data) {
var object = data;
var output;
for (var i=0; i<2; i++){
output+='<li>'
output+='<img id="u0_img"
src="'+object.items[i].snippet.thumbnails.default.url+'">'
output+='</li>'
}
output+='</ul>'
document.getElementById("images").innerHTML=output;
}
});
});
});
</script>
<style>
#u0_img {
display: inline-table;
height: 213px;
left: 0;
position: relative;
text-decoration: none;
top: 0;
width: 400px;
}
.ax_image {
color: #000000;
font-family:
"ArialMT","Arial";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
}
</style>
</head>
<%@include
file="/libs/foundation/global.jsp"%>
<%@page session="false"%>
<%
String apikey =
properties.get("apikey",String.class);
String channelId =
properties.get("channelid",String.class);
String maxNum =
properties.get("maxresults",String.class);
%>
<input type="hidden"
value="<%=url%>" id="yurl"/>
<div id="images"
class="ax_image">
</div>
Go
to edit mode of sidekick and include your Component Group
Drag
and Drop the Component into the parsys.
Double
click on the comonent so that it will pop up dialog
Fill
the entries like API_KEY,Channel_Name,Maximum_Result
NOTE: You
can fetch various data from json according to your requirement, in
the above Example I am only fetching video_id and embedding into the iframe.
