1. How to use the API
If you want videos of a channel you need to use the YouTube API V3. Use youtube.search.list
with the parameters :
part=id, snippet
channelId=ID OF THE CHANNEL
order=date
type=video
How to find ID of a YouTube Channel ?
You can find the id of a channel with his channel name with http://mpgn.github.io/YTC-ID/
More information of youtube.search.list right here.
This is a live demo.
2. With Javascript ?
- First, you need to creat a project in console.google.developers.
- Enable the API YouTube API V3 (set to on).
- In credential part, creat a public access key.
Also if it's a public app, you may interest by : How to protect my public API key ?
This is the basic code to get the videos of a channel :
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>
function googleApiClientReady() {
var apiKey = 'your api key';
gapi.client.setApiKey(apiKey);
gapi.client.load('youtube', 'v3', function() {
request = gapi.client.youtube.search.list({
part: 'snippet',
channelId: 'UCqhNRDQE_fqBDBwsvmT8cTg',
order: 'date',
type: 'video'
});
request.execute(function(response) {
console.log(response);
});
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
3. With AngularJS ?
With AngularJS you need to creat a service 'google' for example, and you can use the service in your controllers.
An sample example : https://gist.github.com/jakemmarsh/5809963
You don't need the part with authentification.
Using deferred is important in this case.
Example in the controller
'use strict';
function init() {
window.initGapi(); // Calls the init function defined on the window
}
angular.module('team')
.controller('VideosCtrl', function ($scope, $window, $sce, googleService) {
$window.initGapi = function() {
$scope.$apply($scope.getChannel);
};
$scope.getChannel = function () {
googleService.googleApiClientReady().then(function (data) {
$scope.channel = data;
}, function (error) {
console.log('Failed: ' + error)
});
};
});
Example in the service googleService
.service('googleService', ['$http', '$q', function ($http, $q) {
var deferred = $q.defer();
this.googleApiClientReady = function () {
gapi.client.setApiKey('YOU API KEY');
gapi.client.load('youtube', 'v3', function() {
var request = gapi.client.youtube.playlistItems.list({
part: 'snippet',
playlistId: 'PLila01eYiSBjOtR8oqXkY0i5c1QS6k2Mu',
maxResults: 8
});
request.execute(function(response) {
deferred.resolve(response.result);
});
});
return deferred.promise;
};
}])
You need to add this line to your index.html
<script src="https://apis.google.com/js/client.js?onload=init"></script>
Hope it's help you !
