구현된 페이지

 

 





기본 개념은 이러합니다. 

#1 Youtube의 영상 공유하기에서, 코드를 선택하면 Iframe 형태로 공유할 수 있습니다. 
#2 그 코드에서 고유 콘텐츠 값 만을 변경하여, 플레이 리스트를 만들어 봅니다. 

 

<iframe width="1000" height="562" src="https://www.youtube.com/embed/yvg6m2ZUoHg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

공유하기에서 코드를 선택하면 대략적으로 저런 코드가 나옵니다. 

여기서 src="https://www.youtube.com/embed/yvg6m2ZUoHg" 이 코드가 콘텐츠에 대한 주소이고, 여기서 yvg6m2ZUoHg 이 코드가 고유 콘테츠 코드라 할 수 있겠습니다. 

그럼 여기서 부터 시작합니다. 

<iframe id="sampleMovie" width="1000" height="562" src="https://www.youtube.com/embed/yvg6m2ZUoHg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<div class="sampleMovieList">
	<ul>
		<li><a href="#" data-url='yvg6m2ZUoHg'>수학강의 ( Grade 10, 11 )</a></li>
		<li><a href="#" data-url='yvg6m2ZUoHg'>화학 강의 ( Grade 11 )</a></li>
		<li><a href="#" data-url='yvg6m2ZUoHg'>고등학생 학업관리</a></li>
	</ul>
</div>

동영상을 보여줄 Iframe과 리스트의 간략한 html 코드입니다. 

여기서 중요한 것은 

<a href="#" data-url='yvg6m2ZUoHg'>

이 것입니다. 여기 data-url 에 다른 동영상들의 고유 코드 값을 넣어둡니다. 

data()의 활용법은 아래 링크 참고 해주세요. 

 

 

Script 입니다. 
 

	$(".sampleMovieList ul li a").click(function(){
		
		var movSrc = 'https://www.youtube.com/embed/'+$(this).data('url')+'?autoplay=1';
		$("#sampleMovie").attr('src',movSrc);

		return false;
	});

$(".sampleMovieList ul li a").click(function(){

이 부분은 버튼을 클릭하는 동작입니다. 

$(this).data('url') 은 위의 html 코드에서 

<a href="#" data-url='yvg6m2ZUoHg'> 여기에 넣어둔 고유 코드를 가져오는 부분입니다. 

$(this).data('url') 에서 $(this) 는 $(".sampleMovieList ul li a").click 이렇게 했으니 가능한 부분입니다. 

var movSrc = 'https://www.youtube.com/embed/'+$(this).data('url')+'?autoplay=1';

코드를 받아와서, Iframe에 들어갈 주소를 만듭니다. 

+'?autoplay=1'; 이 코드는 주소에 넣으면 자동으로 플레이가 됩니다. 

$("#sampleMovie").attr('src',movSrc); 

이 부분이 Iframe에 주소를 전달하는 부분입니다.