유튜브 연동 API

<!-- // 유튜브 게시물 불러오기 시작 -->
<div id="Youtube"></div>
<div id="ulYoutube"></div>
<script>
var cId = "UCx6jsZ02B4K3SECUrkgPyzg";
	var ApiKey = "발급된 API 키";

	$.ajax({
				type : "GET",
				dataType : "json",
				url : "https://www.googleapis.com/youtube/v3/search?part=snippet&channelId="
						+ cId
						+ "&maxResults=10&order=date&type=video&key="
						+ ApiKey,
				success : function(data) {
					console.log(data);
					data.items.forEach(function(element, index) {
								$('#Youtube').append(
												'<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
							});
				},
				complete : function(data) {
				},
				error : function(xhr, status, error) {
				}
			}); 

/* function getYoutube(){ */
		// 초기 유튜브 로드
	$.ajax({
		type: "GET",
	    url : "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=PL-c0h1s2FioCW5-bBweAnAedaUU8IFBC_&key=키 값",
		async : false,
		cache : false,
	    dataType : "json",
	    success : function(data, textStatus, jqXHR){
	    	var pageInfo = data.pageInfo;
		    var totalResults = pageInfo.totalResults;
		    nextPageToken = data.nextPageToken;
		    prevPageToken = data.prevPageToken;
		    var list = data.items;
		    
		    var html;
		    $("#ulYoutube").empty();
		    
		    $.each(list, function(key){
		        var videoInfo = list[key].snippet; 
		        var videoId = videoInfo.resourceId.videoId;
		        var date = videoInfo.publishedAt;
		        date = date.substring(0, 10).replace(/-/gi, ".");
		        var title = videoInfo.title;
		        var description = videoInfo.description;
		        var thumbnails = videoInfo.thumbnails.medium.url;
		        
		        var url = "//www.youtube.com/embed/"+videoId+"?fs=1&controls=2&autoplay=1";
		        
		        html = "<li><a href='"+url+"' target='_blank'><div class='txtBox clearfix'><div class='icon youtube'></div><div class='txt'><strong>"+title+"</strong><div class='date'>"+date+"</div></div></div><div class='imgBox'><div><img src='https://img.youtube.com/vi/" + videoId + "/0.jpg' onerror='this.src=\"/resources/images/gcn/sub/noimg_new.jpg\"' size='295.220' url='//www.youtube.com/embed/"+videoId+"?fs=1&controls=2&autoplay=1' class='youtubeImg' ></div></div></a></li>";
		        $("#ulYoutube").append(html);
		        
		        //$(".con > ul.type2 > li").bind("click", function(){
		        //	youtubeImgClick(this);
		        //});
		        
			});
		    
		},error : function(request, status, error){
			console.log("code : "+request.status); 
	    	console.log("message : "+request.responseText); 
	    	console.log("error : "+ error); 
		}
	});
/* 	}  */
</script>
<!-- // 유튜브 게시물 불러오기 끝 -->

<div class="ytp_ttl ttl"><img src="http://www.gcaf.or.kr/theme/basic/img/youtube_logo.png" alt="유튜브"><a href="https://www.youtube.com/c/예술진흥원/featured" target="_blank" title="새창열기"><span class="sound_only">더보기</span></a></div>
					<div class="ytp_area">
						<div class="video_wrap"><iframe width="560" height="315" src="https://www.youtube.com/embed/BK6oBKIXjxg?&amp;rel=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;modestbranding=1&amp;playlist=BK6oBKIXjxg,0NoUM6cu4xU,8WA68WTNMsw,9aK2FB8xYQU,Mg2B-7B74Iw,kSyJdOwBTbk,xfP51SwZWkY,zC_z6qUn_K8,X6HYKvS8psQ,P6BhvIb6VNQ,UYKmUGy3_1w,KYNTvgPOJ5s,Mz9fNlWeZK4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
						</div>
					</div>

<div class="ytp_ttl ttl"><img src="http://www.gcaf.or.kr/theme/basic/img/youtube_logo.png" alt="유튜브"><a href="https://www.youtube.com/c/예술진흥원/featured" target="_blank" title="새창열기"><span class="sound_only">더보기</span></a></div>
					<div class="ytp_area">
						<div class="video_wrap"><iframe width="560" height="315" src="https://www.youtube.com/embed/vtpEvyjg5b8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
						</div>
					</div>
					
					
결과화면

첫번째 썸네일 클릭시 동영상 새창
두번째 동영상 자동재생
세번째 썸네일 클릭시 현재화면에서 동영상 재생

참고사이트

[OpenAPI/Javascript] Youtube API 사용방법 (tistory.com)

YouTube API 를 사용하여 동영상 가져오기 : 네이버 블로그 (naver.com)

YouTube Data API (v3) - Quota Calculator | Google Developers

Playlists: list | YouTube Data API | Google Developers