<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Videos list</h1>
<ul id="results"></ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>;
<script type="text/javascript">
var playlist = '유튜브 영상 고유번호';
//https://www.youtube.com/watch?v=유튜브 영상 고유번호
//playlist만 원하는 재생목록에 따라 가져오면 됨
//maxResult는 50 이하
$(document).ready(function () {
$.get(
"https://www.googleapis.com/youtube/v3/videos", {
part: 'snippet',
maxResults: 50,
id: playlist,
key: '유튜브API키'
},
function (data) {
var output;
$.each(data.items, function (i, item) {
console.log(item);
vTitle = item.snippet.title;
vId = item.snippet.channelId;
vDe = item.snippet.description;
vTh = item.snippet.channelTitle;
vaaa = item.snippet.thumbnails.standard.url;
output = '<li>' + vTitle + '<br>--videoid: ' + vId + '<br>--videodescription: ' +
vDe + '<br>--videothumbnails: ' + vTh + '<br><img src ="' + vaaa + '"></li>';
/*output= '<li>'+vTitle+'<iframe src=\"//www.youtube.com/embed/'+vId+'\"></iframe></li>';*/
$("div").append(output);
})
}
);
});
</script>
</body>
</html>728x90
반응형