Resolvi em partes essa situação, não entendo muito do assunto, mas vi um vídeo em Inglês e consegui tirar um bom proveito sobre o assunto.
Primeiro você entra no endereço: www.console.developers.google.com/project/507871535838/apiui/credential , faz o login e gera uma Chave para aplicativos do navegador, parecida com essa: AIzaSyAUdzBYnsoHcgeDqY9sflH0bv0XaIBjpsI
você vai utiliza-la no script.js
Depois você baixa o arquivo jquery-1.11.3.min.js
e cria 2 arquivos: index.html
e script.js
No index.html
que você criou, chama os arquivos .js
e para mostrar os vídeos, você chama através do código abaixo no body do index.
<ul id="results"></ul>
Agora crie o script.js
:
var channelName = 'Aqui vai o nome do canal';
var vidWidth = 250; //largura de cada vídeos
var vidHeight = 187; //altura de cada vídeos
var vidResults = 10; //qtd de vídeos que vai aparecer na galeria max 50
$(document).ready(function(){
$.get(
"https://www.googleapis.com/youtube/v3/channels",{
part: 'contentDetails',
forUsername: channelName,
key: 'AIzaSyAUdzBYnsoHcgeDqY9sflH0bv0XaIBjpsI'},//altere para sua chave
function(data){
$.each(data.items, function(i, item){
console.log(item);
pid = item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
})
}
);
function getVids(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part: 'snippet',
maxResults: vidResults,
playlistId: pid,
key: 'AIzaSyAUdzBYnsoHcgeDqY9sflH0bv0XaIBjpsI'},//altere para sua chave
function(data){
var output;
$.each(data.items, function(i, item){
console.log(item);
videTitle = item.snippet.title;
videoId = item.snippet.resourceId.videoId;
output = '<li><iframe width="'+vidWidth+'" height="'+vidHeight+'" src=\"https://www.youtube.com/embed/'+videoId+'\"></iframe></li>';
//Append to resultes listStyleType
$('#results').append(output);
})
}
);
}
});
Espero ter ajudado, como disse: sou leigo, mas se alguém quiser melhorar, fique a vontade.