내 블로그/홈페이지에 유튜브 삽입 하기 IFrame Player API

웹사이트나 블로그에 YouTube 동영상을 정교하게 제어하기 위해서는 **YouTube IFrame Player API**를 활용하는 것이 좋습니다. 단순히 <iframe>을 직접 삽입하는 것과 달리, 자바스크립트를 통해 동영상의 자동 재생, 상태 변경 감지, 재생 중지 등 다양한 이벤트를 자유롭게 제어할 수 있습니다.

1. YouTube IFrame Player API 전체 예제 코드

아래 코드는 IFrame API를 비동기로 로드하고, 플레이어를 생성하여 6초간 재생 후 자동으로 정지시키는 기본 예제입니다.

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. <iframe> (및 동영상 플레이어)이 대체될 <div> 태그 -->
    <div id="player"></div>

    <script>
      // 2. IFrame Player 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);

      // 3. API 코드 다운로드 후 <iframe> 및 YouTube 플레이어 생성
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. 플레이어가 준비되면 호출되는 함수
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. 플레이어 상태가 변경될 때 호출되는 함수
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000); // 6초 후 정지
          done = true;
        }
      }
      
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

2. 핵심 동작 방식 알아보기

1) 플레이어 컨테이너 지정

HTML 내의 <div id="player"></div> 영역은 API가 로드된 후 지정한 가로/세로 크기의 <iframe> 요소로 자동 대체됩니다.

2) API 스크립트 비동기 로드

tag.src = "https://www.youtube.com/iframe_api";를 통해 구글의 공식 API 스크립트를 비동기로 가져옵니다. 페이지 로딩 속도에 영향을 주지 않고 안전하게 불러옵니다.

3) onYouTubeIframeAPIReady 콜백 함수

API 로드가 완료되면 자바스크립트가 자동으로 onYouTubeIframeAPIReady() 함수를 찾아 실행합니다. videoId에 원하는 유튜브 영상 ID값(예: M7lc1UVf-VE)을 지정하여 초기화합니다.

4) 이벤트 제어 (onReady, onStateChange)

onReady : 플레이어가 준비되면 바로 동영상을 재생(playVideo())합니다.
onStateChange : 영상이 재생 시작(YT.PlayerState.PLAYING)되면 타이머를 작동시켜 6초 후 영상이 멈추도록(stopVideo()) 구현되어 있습니다.

DEV.자료창고