[jQuery] iframe youtube 재생, 일시정지, 중지 제어

유튜브 영상을 사이트에 붙이려면 원하는 동영상에 가서

밑의 캡처처럼 공유버튼 -> 소스코드에 있는 iframe 코드를 복사해서 사용하면 된다.

 

 

근데...

재생 일시정지 중지를 따로 버튼을 만들어 제어해야하는 일이 발생하였다!

그럴땐

 

1. src에 마지막에 아래의 쿼리스트링을 붙인다.

 ?enablejsapi=1&version=3&playerapiid=ytplayer

 

위 캡쳐를 예시로 들면

<iframe width="560" height="315" src="https://www.youtube.com/embed/liGwFOQr45Q?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>

 

 

 

2. 제어할 버튼에 이벤트 추가

$(".stop").on("click", function(){
	$("iframe")[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

 

stopVideo, playVideo, pauseVideo를 저기 알맞게 넣으면 된다.