javascript「YouTube Data API v3」を使用して YouTubeの再生リストを取得して一覧表示

YouTubeに掲載している動画の特定再生リストをサイト内に一覧表示したいという要望がありましたので実装した方法をメモ

Javascript

var apikey = '○○○○'; //google apiキー
var results = [];
		
// URLを生成する関数
function generate_api_url(listid) {
	var url = 'https://www.googleapis.com/youtube/v3/playlistItems';
	url += '?part=snippet';
	url += '&playlistId=' + listid;
	url += '&key=' + apikey;
	return url;
}
		
// データを取得する関数
function get_api_data(listid) {
	var getData = $.ajax({
				url: generate_api_url(listid),
				dataType: 'json'
			});
	getData.then(
		function(data) {
			for (var i = 0; i < data.items.length; i++) {
				if(data.items[i].snippet.title!='Private video' && data.items[i].snippet.title != 'Deleted video'){
					results.push({
						"title": data.items[i].snippet.title,
						"id": data.items[i].snippet.resourceId.videoId
					});
				}
			}

			for (var i=0; i < results.length; i++){
				$('.movielist__mv__list').append('<li class=""><div class="movielist__mv__list__image"><a href="'+results[i]['id']+'"><img src="https://img.youtube.com/vi/'+results[i]['id']+'/0.jpg" alt="'+results[i]['title']+'" /></a></div><h3><a href="'+results[i]['id']+'">'+results[i]['title']+'</a></h3></li>');
			}
		},
		function(error) {
			console.log(error);
		}
	);
}

$(function (){
	get_api_data('○○○○'); //再生リストID
});

HTML

<ul class="movielist__mv__list">
</ul>

google APIキーは「Google Cloud Platform」よりプロジェクトを作成して取得、更にAPIライブラリの中から「YouTube Data API v3」を選択。
他サイトで利用できないよう認証情報ページで使用サイトと使用APIを制限します。

• Youtube Data API APIキー発行手順と有料か無料かを解説・セキュリティ対策も【2022年9月】
• YouTube Data API v3を試してみました
• YouTube Data APIで再生リスト内の動画情報をまとめて取得する