티스토리 뷰

728x90
반응형

아래 코드는 youtube api 에서 공식적으로 제공하는 코드 이다.

https://developers.google.com/youtube/iframe_api_reference?hl=ko

 

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API

Embed a YouTube player in your application.

developers.google.com

    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 youtubePlayer;
    function onYouTubeIframeAPIReady() {
        youtubePlayer = new YT.Player('player', {
            width: '640',
            height: '360',
            videoId: 'x993sfGToV0',
            playerVars:{
                rel:0 //관련영상 표시하지 않기.
            },
            events: {
                'onReady': onPlayerReady, //로딩할때 이벤트 실행
                'onStateChange': onPlayerStateChange //플레이어 상태 변화시 이벤트실행
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();//자동재생
    }

    var done = false;
    function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.PLAYING && !done) {
            // setTimeout(stopVideo, 6000);
            done = true;
        }
    }
    function stopVideo() {
        youtubePlayer.stopVideo();
    }

    function playVideo() {
        youtubePlayer.playVideo();//재생
    }

 

728x90
반응형
댓글