Javascript YouTube 웹에 유투브 동영상 출력 .js

 

Javascript YouTube 유투브 동영상 출력 .js

 

같은 프로젝트에 여러군데 동영상을 출력해야 되서 js 로 묶어봤습니다.

 

 <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflfUQ-oz/www-widgetapi.js"></script>
<script type="text/javascript" src="<c:url value='/resource/function/uTubePlayer.js'/>"></script>

 

헤더에 두줄 추가하면 됩니다.

 

위의 uTubePlayer.js 경로는 아래 js 파일을 원하는 곳에 다운받아 그 경로랑 맞춰주면 됩니다.

 

DownLoad :

uTubePlayer.js

 

Play 는 uTubePlayer.settingVideo('adVideo', 'rht_uiteReE', 480, 770);

 

첫번째 매개변수는 동영상을 출력할 div의 id, 두번째는 출력할 동영상 id 세번째는 height, 마지막은 height 입니다.

 

동영상 id는 유투브에서 동영상 출력시 나오는 url 주소에 나와있습니다.

https://www.youtube.com/watch?v=rht_uiteReE <- 볼드처리된 요것이 아이디

 

Ex)

<div class="videoBox">
    <div class="video" id="adVideo"></div>
</div>

 

<script type="text/javascript">

$(function(){
    uTubePlayer.settingVideo('adVideo', 'rht_uiteReE', 480, 770);
});

</script>

 

 

출력이 잘 되는것을 확인했습니다 ~!

 

/* 20170418 추가 */

youtube 출력되는 동영상 변경 방법 플레이리스트

기존에 js 파일에 changeVideo function 추가

 

옵션으로 플레이리스트바를 추가해도 되지만 심플하게 처리하는 방법은 아래와 같습니다.

 

플레이할 동영상의 id를 배열로 생성하고

var playList = [플페이할 동영상의 id];

 

배열의 인덱스를 매개변수로 받아 loadVideoById에 넣어주면 됩니다.

  changeVideo : function(no){
   player.loadVideoById(playList[no]);
  }