小金井にあるWEB制作会社の備忘録

MEMORANDUM

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

  • 公開日：2023-01-28
  • 最終更新日：2023-02-01

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を制限します。

同一カテゴリーの記事