youtube 자바스크립트 API 활용 (부트스트랩 모달시 활용)

youtube 동영상을 넣을 때 iframe 대신 자바스크립트를 이용하는 방법 

• https://developers.google.com/youtube/iframe_api_reference
• https://developers.google.com/youtube/player_parameters
• https://developers.google.com/youtube/js_api_reference

목표: 부트스트랩의 버튼을 클릭하면 유투브 동영상을 modal 창에 띄워 자동으로 재생한다.

1. html 코드

<!-- Button --> <button class="btn btn-primary" data-toggle="modal" data-target="#youtube">Play</button> <!-- Modal --> <div class="modal fade" id="youtube" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <div id="youtube-player"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- modal-content --> </div><!-- modal-dialog --> </div><!-- main modal -->

2. javascript 코드

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 player;

$('#youtube').on('shown.bs.modal', function () {

    player = new YT.Player('youtube-player', {

        height: '488',

        width: '867',

        videoId: '유투브 동영상 ID',

        playerVars: {

            modestbranding: '1',

            showinfo: '0',

            autoplay: '1',

            rel: '0'

        },

        events: {

            'onReady': function (event) { event.target.playVideo(); }

        }

    });

});

 

$('#youtube').on('hidden.bs.modal', function () {

    player.stopVideo();

    var parent = $('#youtube-player').parent();

    parent.html('<div id="youtube-player"></div>');

});

설명 : ‘Play’버튼을 눌러서 모달창에 유투브 동영상을 재생하다가 ‘Close’ 버튼을 눌러 모달창을 닫아도 크롬이나 사파리에서는 동영상이 계속 재생된다. 이를 위해 ‘Close’버튼을 누르면 동영상을 중지시키고, 유투브 자바스크립트가 만든 다음코드를 원래대로 돌려놓는다.

<iframe id="youtube-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="867" height="488" src="https://www.youtube.com/embed/동영상ID?modestbranding=1&amp;showinfo=0&amp;autoplay=1&amp;rel=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost"></iframe>

출처 : http://blog.dokenzy.com/archives/1679