Youtube API - html을 삽입하는 두가지 방법

유튜브 영상을 메인에 거는 일이 많은 편인데
그 유튜브 영상을 제어하기 위해 컨트롤 버튼을 만들어 쓰는 경우가 생겨 정리합니다 .

더 자세히는 유튜브에서 제공하는 API 설명 사이트를 통해 알아보실 수 있습니다.

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

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

 

 

1. 첫번째 방법 - 동영상 js 로 넣기

<div id="player"></div> // 유튜브 영상이 자리 할 곳입니다.

html 내에 해당 동영상이 들어갈 자리를 만듭니다.
아이디 값은 변경 가능하나, 변경시 아래 js에도 변경된 아이디값을 반영해주어야합니다. 

var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* ----------------------------------------------------------------------
여기까지는 youtube api를 추가하겠단 뜻입니다. 
만약 이게 쓰고싶지않다면 
<script src="https://www.youtube.com/iframe_api"></script> 
해당 스크립트를 import 할 것.
 ----------------------------------------------------------------------*/


//  after the API code downloads.
var player; // player 란 변수를 만들어서 이 안에 영상에 대한 값과 이벤트를 넣어줄 예정입니다. 아직은 빈 변수입니다.
function onYouTubeIframeAPIReady() {
	 player = new YT.Player('player', { 
     // 아이디값을 변경해도 상관없습니다. 다만, html에 부여한 id 값도 동일하게 변경해야합니다.
		videoId: 'M7lc1UVf-VE', // 동영상 ID 삽입 - 임시 아이디 삽입해두었습니다.
		width : "560", 
		height : "349", // 플레이어의 가로세로값을 정할 수가 있습니다. 
		playerVars:{ // 아래는 해당 플레이어의 기본 속성들을 정할 수 있습니다.
		  'modestbranding': 1,
		  'autoplay' : 1, // 자동재생
		  'controls' : 0, // 컨트롤러의 유무
		  'showinfo' : 0, // 재생영상에 대한 정보 유무
		  'rel': 0, // 해당 영상이 종류 된 후, 관련 동영상을 표시할지의 여부
		  'loop': 1, // 반복 재생의 여부
		  'playlist': 'M7lc1UVf-VE' 
          // 단일 동영상을 반복재생하기 위해서 해당 매개변수가 필요합니다. 
          // 같은 동영상 id를 넣어줌으로써 반복 재생이 됩니다.
		 },
		events: {
		  'onReady': onPlayerReady, // 해당 이벤트는 동영상이 준비되면 발생하는 함수를 뜻합니다. 1)과 연결
		  'onStateChange': onPlayerStateChange 
          // 해당 이벤트는 상태가 변함에 따라 해당 함수가 발생하는 것을 뜻합니다. (재생/정지/준비 등등) 2)와 연결
		 }
	 });
};

// 1) 동영상이 준비되면 발생하는 함수
function onPlayerReady(event) {
  event.target.playVideo(); // 준비된 동영상을 재생합니다.
 // 그런데 위에서 autuplay 매개변수를 설정해두었다면 onReady 이벤트를 통해 재생을 명시할 필요는 없습니다.
 // 다만, 재생시 음소거를 원하는 등의 이벤트를 원한다면 해당 이벤트를 씀으로써 가능합니다. 
}

// 2) 플레이어의 상태에 따른 이벤트 
function onPlayerStateChange() {
  if(player.getPlayerState() == 1) console.log("재생중");
  else if(player.getPlayerState() == 2) console.log("일시중지");
/* ----------------------------------------------------
 -1 –시작되지 않음 / 0 – 종료 / 1 – 재생 중 / 2 – 일시중지 / 3 – 버퍼링 / 5 – 동영상 신호
 해당 이벤트에서 알아둘 것은 위의 플레이어상태인데
 해당 상태를 통해, 본인이 만든 컨트롤러 버튼들의 show/hide등을 컨트롤 할 수 있습니다.
---------------------------------------------------- */
}

 

 

2. 두번째 방법 - iframe 으로 넣기

첫번째 방법은 js를 통해서 div#player 자리가 iframe으로 대체되는 방식이였습니다.
이번엔 iframe을 바로 html 안에 삽입하는 방식입니다.

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?rel=0&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1&amp;version=3&amp;playerapiid=ytplayer" frameborder="0" gesture="media" allow="encrypted-media"></iframe>

 

여기서 중요한 것은 동영상 아이디가 끝난 부분에 매개변수를 같이 추가함으로써 플레이어를 제어한다는 것 입니다.
(자동재생, 반복재생, 동영상 정보 유무 등등..)

기재하는 방식은 해당하는 동영상 아이디 뒤로 매개변수를 추가 하는 것입니다.
아래 제가 작성한 매개변수입니다.

?rel=0&controls=0&showinfo=0&autoplay=1 
/* -------------------------------------------------------
관련 동영상 표기, 플레이어 기본 컨트롤러 유무, 동영상 정보 유무, 자동재생 여부
* 각각의 매개변수를 연결시 &로 연결합니다.
* 동영상 아이디 뒤에 매개변수 추가시 제일 처음은 ? 로 시작합니다.
------------------------------------------------------- */

영상 종료 후 관련 동영상 여부, 동영상 정보 유무 등이 있습니다.
그런데 이렇게 iframe을 바로 html에 넣은 후에 뒤에 꼭 아래 매개변수를 넣어야 유튜브 API가 실행됩니다. 

 

&enablejsapi=1&version=3&playerapiid=ytplayer

후에 js는 아래와 같이 작성합니다.

 

 

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/* ---------------------------------------------------------------
여기까지는 youtube api를 추가하겠단 뜻입니다. 
만약 이게 쓰고싶지않다면 
<script src="https://www.youtube.com/iframe_api"></script> 
해당 스크립트를 import 할 것.
--------------------------------------------------------------- */


//  after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
  });
};
/* ---------------------------------------------------------------
첫번째 방식과는 다른 이유는, 앞서 iframe 태그에 바로 매개변수를 넣어 
본인이 원하고자 하는 옵션들을 설정했기 때문입니다. 
--------------------------------------------------------------- */


// 1) 동영상이 준비되면 발생하는 함수
function onPlayerReady(event) {
  player.mute(); // 동영상 준비 후, 음소거 합니다.
};

// 2) 플레이어의 상태에 따른 이벤트 
function onPlayerStateChange() {
	// 위와 동일
};

이 두가지 방법을 정리한 이유는,
동영상을 관리자에서 변경 가능하게 만드는데 이럴 때 아이디값을 ifram에 바로 넣어다 뺐다를 할 수 있게
개발과 유동적으로 변경가능하게 만들기 위함이였습니다.

 

 

 

Tip

ie9 에서 youtube api 안의 mathMedia 선언이 먹지 않습니다.
찾아본 결과 ie9는 mathMedia 속성을 지원하지 않는다고 하고,
이에 대해 youtube API 자체는 ie9를 지원하지 않기 때문에 (not support)  사용할 수가 없습니다.
이에 matchMedia.js 를 추가함으로 가능할까 싶어 시도해봤지만, 안된다는 것을 확인했습니다.

다만 ie9에서 API 를 쓰지 않고, 단순히 iframe 추가시에는 비디오가 나옵니다. 
이점 참고하여 작업해야할 것으로 보입니다. 

 

 

 

 

*댓글과 좋아요는 힘이 됩니다.