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를 저기 빨간부분에 알맞게 넣으면 된다.