폴시랩

Javascript API를 이용해 유튜브 영상을 재생, 일시정지 합니다.

Explanation

유튜브 iframe(자바스크립트) API : https://developers.google.com/youtube/iframe_api_reference?hl=ko
모든 정보는 구글 개발자 사이트를 통해 한글로 제공하고 있습니다.

2018.10.26 수정사항

오래된 글인데.. 아직 찾아오시는 분들이 있어서 setTimeout으로 처리했던 영상의 로드시점 처리를 수정하였습니다.

소스보기

[html]
<iframe id="youtube_video" src="https://www.youtube.com/embed/ABCDEFGHIJK?version=3&enablejsapi=1"></iframe>
<!-- ABCDEFGHIJK = 영상코드 -->
 
<!-- button -->
<p id="play">재생</p>
<p id="pause">일시정지</p>
[javascript]

jQuery(document).ready(function($){
    "use strict";

    $(window).load(function(){
        youtube_play_api(); //window가 로드되면 함수 실행
    }

    function youtube_play_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 player;
    
        // 수정 전
        // setTimeout(function(){
        //    player = new YT.Player('youtube_video', {});
        // }, 1000);

        // 영상이 준비되면 실행되는 함수
        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player('youtube_video', {});
        };
       
        $("#play").click(function(){
            if(!player || typeof player.playVideo === 'undefined') return;
            var fn = function(){player.playVideo();}
            setTimeout(fn, 1000);
        });
        
        $("#pause").click(function(){
             player.pauseVideo();
        }); 
    }

});