[유튜브API] 유튜브 영상의 데이터(제목, 설명, 썸네일)가져오기

728x90
<!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
티스토리툴바
