본문 바로가기

Web/javascript & jQuery

유투브 동영상 api를 이용해 제어하는 방법

반응형

유투브 영상을 퍼올때 보통은 아래의 이미지처럼 공유의 iframe 소스코드를 복사해서 사용하지만,

자동재생, 음소거 등 다양한 설정을 할 수 없는 부분이 있었습니다.




옵션항목을 제어하기 위해서 유투브 API 코드를 활용할 수 있는데요~

사용방법은 간단합니다.




유투브 동영상을 재생시켜줄 틀 하나 생성해주세요.
ex. <div id="player"> </div>
<script type="text/javascript">
// 비동기방식으로 아이프레임 플레이어 API 코드를 불러옵니다.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// api 코드 다운로드 후 제어관련 함수 생성.
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        playerVars: {'autoplay': 1, 'controls': 1,'autohide':1,'wmode':'opaque' },
        videoId: 'XTIiw37N-_c',
        events: {
            'onReady': onPlayerReady
        }
    });
};

// api 음소거 함수호출
function onPlayerReady (event) {
    event.target.mute();
}
</script>



출처 : https://developers.google.com/youtube/iframe_api_reference



반응형