jQuery Youtube 임베드 (youtube api)

December 1, 2022

JavaScriptjquery

프로젝트 진행 중 페이지에 유튜브 영상을 삽입해야 했다. youtube api 를 이용했으며 이를 기록해보고자 한다.

1. 단순한 iframe 태그로 삽입하는 방법.

사용자의 자유도가 좀 떨어지며 별로 권장되진 않는다. 방법은 너무 쉽기 때문에 따로 포스팅하지 않겠다.

2. youtube API를 이용해 플레이어를 삽입한다.

=> youtube DEVELOPERS 사이트에서 플레이어 API를 제공하기 때문에, javascript 코드에 비디오 ID만 삽입해 넣으면 플레이어 크기, 플레이어 상태( stop or playing), 플레이어 소리 크기...을 자유롭게 지정할 수 있다.

<HTML 코드>

: 해당 div 태그는 IFRAME API가 동영상 플레이어를 배치할 페이지의 위치를 식별한다. 이 API에서는 div 태그를 iframe 태그로 대체한다. 또는 IFRAME 요소를 직접 삽입할 수도 있다.

<div id="player"></div>
<!--플레이어를 불러올 영역>

<javascript 코드>

=> 동영상 플레이어에 본인이 원하는 기능을 자유롭게 지정할 수 있다.

onYouTubeIframeAPIReady() 함수는 플레이어 API 코드가 다운로드되는 즉시 실행된다. 코드에서 이 부분이 삽입한 동영상 플레이어를 참조하는 전역 변수 player를 정의하며, 함수가 동영상 플레이어 개체를 구성한다.
onReady 이벤트가 실행될 때, onPlayerReady 함수가 실행된다. 이 함수는 동영상 플레이어가 준비되면 재생을 시작해야 함을 의미한다. ( 플레이어 로딩될때까지 재생을 보류)
플레이어의 상태가 변경되면 API가 onPlayerStateChange 함수를 호출하여 이 상태는 플레이어 재생 중, 일시중지됨, 완료됨 등을 나타낼 수 있다.

//youtube 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;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    //width&height를 설정할 수 있으나, 따로 css영역으로 뺐다.
    videoId: 'sEOuJ4z5aTc',
    events: {
      'onReady': onPlayerReady,//로딩중에 이벤트 실행한다
      'onStateChange': onPlayerStateChange//플레이어 상태 변화 시 이벤트를 실행한다.
    }
  });
}

function onPlayerReady(event) {
 //로딩된 후에 실행될 동작을 작성한다(소리 크기,동영상 속도를 미리 지정하는 것등등...)
  event.target.playVideo();//자동재생
 
}

var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    done = true;
    //플레이어가 재생중일 때 작성한 동작이 실행된다.
    (원하는 시간만큼만 재생되고 멈추게 하는 것도 가능하다.)
  }
}

3. 썸네일 적용한 내가 작성한 코드

<HTML 코드>

<div id="playerFrame">
  <img id="clickPlay" src="https://img.youtube.com/vi/luQwXvSR22g/mqdefault.jpg" alt=“대체텍스트”>
  <div id="player"></div>
</div>

//썸네일 해상도
120X90 (default.jpg) 
https://img.youtube.com/vi/0wlXaHmmOVc/default.jpg

320X180 (mqdefault.jpg)
https://img.youtube.com/vi/0wlXaHmmOVc/mqdefault.jpg

480X360 (hqdefault.jpg)
https://img.youtube.com/vi/0wlXaHmmOVc/hqdefault.jpg

640X480 (sddefault.jpg) 
https://img.youtube.com/vi/0wlXaHmmOVc/sddefault.jpg

동영상 최대 해상도 (maxresdefault.jpg)
https://img.youtube.com/vi/0wlXaHmmOVc/maxresdefault.jpg

<javascript 코드>

function loadVideo() {
  var player;
  window.YT.ready(function () {
    player = new window.YT.Player("player", {
      height: $('#playerFrame').height(),
      width: $('#playerFrame').width(),
      videoId: "luQwXvSR22g",
      events: {
        onReady: onPlayerReady,
        onStateChange: onPlayerStateChange
      }
    });
  });

  function onPlayerReady(event) {
    event.target.playVideo();
    $('#clickPlay').hide();
  }

  function onPlayerStateChange(event) {
    var videoStatuses = Object.entries(window.YT.PlayerState)
    console.log(videoStatuses.find(status => status[1] === event.data)[0])
  }
}

function clickPlay() {
  $.getScript("https://www.youtube.com/iframe_api", function () {
    loadVideo();
  });
}

$('#playerFrame').click(function () {
  clickPlay()
})

이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기→