[Tip] Youtube iframe 이벤트 제어

<div class="video">

<!-- 하기 첫번째 script부분을 사용하려면 enablejsapi=1 파라미터 반드시 필요-->

<!-- 하기 두번째 script부분을 사용하려면 enablejsapi=1&version=3&playerapiid=ytplayer 파라미터 반드시 필요-->

<iframe id="youtube_video" src="영상소스?enablejsapi=1&version=3&playerapiid=ytplayer&ecver=2&vq=hd720&rel=0" width="640" height="360" frameborder="0" gesture="media" allowfullscreen></iframe>

</div>

<script type="text/javascript">

//Youtube API 로드

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1;

//필수 구현 함수, 자동 호출 함수, 플레이어 객체 구현 필요

function onYouTubeIframeAPIReady(){

player1 = new YT.Player('youtube_video',{

//                height: '315',            // <iframe> 태그 지정시 필요없음

//                width: '560',             // <iframe> 태그 지정시 필요없음

//                videoId: '9bZkp7q19f0',   // <iframe> 태그 지정시 필요없음

//                playerVars: {             // <iframe> 태그 지정시 필요없음

//                    controls: '2'

//                },

events: {

'onReady': onPlayerReady, //플레이어 로드가 완료되면

'onStateChange': function(event){ //플레이어 상태가 변경될 때마다 실행

if(event.data == YT.PlayerState.BUFFERING || event.data == YT.PlayerState.PLAYING){

player2.pauseVideo();

player3.pauseVideo();

}

}

}

});

}

    function onPlayerReady(event) {

        console.log('onPlayerReady 실행');

        // 플레이어 자동실행 (주의: 모바일에서는 자동실행되지 않음)

        event.target.playVideo();

    }

var playerState;

function onPlayerStateChange(event) {

playerState = event.data == YT.PlayerState.ENDED ? '종료됨' :

event.data == YT.PlayerState.PLAYING ? '재생 중' :

event.data == YT.PlayerState.PAUSED ? '일시중지 됨' :

event.data == YT.PlayerState.BUFFERING ? '버퍼링 중' :

event.data == YT.PlayerState.CUED ? '재생준비 완료됨' :

event.data == -1 ? '시작되지 않음' : '예외';

console.log('onPlayerStateChange 실행: ' + playerState);

}

</script>

<script type="text/javascript">

function imsiPauseVideo(){

//playVideo=재생, pauseVideo=일시정지, stopVideo=정지

$('#youtube_video')[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');

}

</script>