유튜브 동영상 종료 시 처리하기

홈페이지에 유튜브 영상을 embed하고 그 영상이 종료될 때 어떤 액션을 취하고 싶다면 아래와 같이 하면 된다.

// 이것을 선언하면 아래의 onYouTubePlayerAPIReady()를 자동으로 호출한다.
<script src="http://www.youtube.com/player_api"></script>

<script type="text/javascript">

    var player;

    // 유튜브 플레이어를 생성한다.
    function onYouTubePlayerAPIReady() {
        try {
            player = new YT.Player('playerLayer', {
                height: '300',
                width: '500',
                videoId: '유튜브의 동영상 아이디',
                playerVars: {
                    'autoplay': 0,  // 자동실행여부
                    'controls': 1,   // 재생컨트롤 노출여부
                    'autohide': 0,  // 재생컨트롤이 자동으로 사라질지의 여부
                    'rel': 0,          // 동영상 재생완료 후 유사동영상 노출여부
                    'wmode': 'transparent'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        } catch (e) {
        }
    }

    // 유튜브 플레이어가 다 만들어지면 호출됨
    function onPlayerReady(event) {
        // 자동으로 플레이하는 코드로 위에서 autoplay: 0으로 하였으므로 주석처리
        //event.target.playVideo();
    }

    // 동영상의 재생이 완료되었을 때 호출됨
    function onPlayerStateChange(event) {
        if (event.data === 0) {
            // 종료 후 작업을 여기에 코딩

           

            // iframe으로 생성된 플레이어의 iframe 코드
            // alert(event.target.getVideoEmbedCode());
            // <iframe width="476" height="278" title="YouTube video player" id="player" src="https://www.youtube.com/embed/xxxxxxxxxxxx" frameborder="0" allowfullscreen="1"></iframe>

            // 플레이URL
            // alert(event.target.getVideoUrl());
            // https://www.youtube.com/watch?feature=player_embedded&v=xxxxxxxxxxxx

        }
    }
</script>

<div id="playerLayer"></div>