유튜브 아이프레임 리스트 플레이어 > 팁

<script>
youtubeList_1 = ['qKkp-47stm0', '[ 볼빨간사춘기 ] - Travel(여행)'];
youtubeList_2 = ['vH42qX5nEaQ', '[ 볼빨간사춘기 ] - Bom(나만, 봄)'];
youtubeList_3 = ['9U8uA702xrE', '[ 볼빨간사춘기 ] - 우주를 줄게'];
youtubeList_4 = ['1ri7I32Auhg', '[ 볼빨간사춘기 ] - 싸운날'];
youtubeList_5 = ['qfeoX17dav0', '[ 볼빨간사춘기 ] - Hug(품)'];
youtubeList_6 = ['d8BDwLQshEU', '[ 볼빨간사춘기 ] - Stars over me(별 보러 갈래?)'];
playerOrder = 0; // 0은 랜덤으로 재생 / 1은 1번곡부터 재생 / n은 n번곡부터 재생
headImage = 'https://blog.kakaocdn.net/dn/cdasbB/btq2yozuKTJ/gzL2aaowa57RqvyEwNzwmK/img.jpg'; // 상단이미지 주소
footImage = 'https://blog.kakaocdn.net/dn/1fRXu/btq4PnpuqGI/CN30f7b3tatGEF01NRxpvk/img.jpg'; // 하단이미지 주소
</script>
<script src=https://www.youtube.com/iframe_api></script>
<script>
playerSize = { pc:'100%', mobile:'100%' }; // 플레이어 가로길이 : 세로길이는 16:9 로 자동 리사이징 - pc 와 모바일 각기 설정
listGap = { pc:'2px', mobile:'4px' }; // 리스트 간격 - pc 와 모바일 각기 설정
fontSize = { pc:'12pt', mobile:'20pt' }; // 폰트 크기 - pc 와 모바일 각기 설정
fontPadding = { pc:'10px', mobile:'20px' }; // 폰트 간격 - pc 와 모바일 각기 설정
listBorder = { pc:'1px solid #cccccc', mobile:'1px solid #cccccc' }; // 리스트 테두리 : 미사용시 'none' - pc 와 모바일 각기 설정
textAlign = { pc:'center', mobile:'center' }; // 글자 정렬 : 'left','center','right' - - pc 와 모바일 각기 설정
backColor = { list_back:'#eeeeee', current_back:'#f7d7e4' }; // 리스트 기본배경색 / 리스트 현재곡 배경색
rollColor = { roll_over:'#ff0000', roll_out:'#000000'}; // 마우스 롤오버/롤아웃 글자 색상
// 기타 첨가하고 싶은 스타일은 취향대로 css 처리할 것
for (listTotal = 0; this['youtubeList_' + (listTotal + 1)]; listTotal++);
youtubeNumber = !playerOrder ? Math.floor(Math.random() * listTotal + 1) : playerOrder;
function listEffect() {
for (var i = 1; i <= listTotal; i++) this['list_' + i].style.background = i == arguments[0] ? backColor.current_back : backColor.list_back;
}
goMode = 1;
function youtubeGo() {
if (arguments[0] == 'next') mediaPlayer.loadVideoById(this['youtubeList_' + (listNumber = listNumber == listTotal ? 1 : listNumber + 1)][0]), goMode = 1;
else if (arguments[0] == 'prev') mediaPlayer.loadVideoById(this['youtubeList_' + (listNumber = listNumber == 1 ? listTotal : listNumber - 1)][0]), goMode = 0;
else mediaPlayer.loadVideoById(this['youtubeList_' + (listNumber = arguments[0])][0]);
mediaPlayer.playVideo();
listEffect(listNumber);
}
function listMode() {
for(var i = 1; i <= listTotal; i++) document.write("<div id=list_" + i + " style='cursor:pointer;margin-top:" + gapList + ";font-size:" + sizeFont + ";padding:" + paddingFont + ";text-align:" + alignText + ";border:" + borderList + "'></div>");
}
function onYouTubeIframeAPIReady() {
mediaPlayer = new YT.Player('youtubePlayer', { events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange} });
}
mode = 1;
function onPlayerReady(event) {
event.target.playVideo();
if (mode) setTimeout(mediaMode, 1), delete mode;
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) youtubeGo(goMode ? 'next' : 'prev');
}
pcMobile = 'win16win32win64macmacintel';
if (pcMobile.indexOf(navigator.platform.toLowerCase()) < 0) {
sizePlayer = playerSize.mobile;
sizeFont = fontSize.mobile;
paddingFont = fontPadding.mobile;
gapList = listGap.mobile;
borderList = listBorder.mobile;
alignText = textAlign.mobile;
}
else {
sizePlayer = playerSize.pc;
sizeFont = fontSize.pc;
paddingFont = fontPadding.pc;
gapList = listGap.pc;
borderList = listBorder.pc;
alignText = textAlign.pc;
}
function mediaMode() {
for (var i = 1; i <= listTotal; i++) {
this['list_' + i].style.color = rollColor.roll_out;
this['list_' + i].innerText = this['youtubeList_' + i][1];
this['list_' + i].num = i;
this['list_' + i].onclick = function() { youtubeGo(this.num); }
this['list_' + i].onmouseover = function() { this.style.color=rollColor.roll_over; }
this['list_' + i].onmouseout = function() { this.style.color=rollColor.roll_out; }
}
this['list_' + youtubeNumber].onclick();
if (headImage != '') topImage.style.display='block', topImage.innerHTML = "<img style=width:100%;display:block;margin-bottom:" + gapList + " src=" + headImage + ">";
if (footImage != '') bottomImage.style.display='block', bottomImage.innerHTML = "<img style=width:100%;display:block;margin-top:" + gapList + " src=" + footImage + ">";
}
</script>

<style>
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
#playerGroup{ font-family:'Nanum Barun Gothic'; }
#mediaPlayer { position:relative; padding-bottom:56.25%; height:0px; overflow:hidden; max-width:100%; }
#youtubePlayer { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; }
</style>

<script>document.write("<div id=playerGroup style='margin:0 auto;width:" + sizePlayer + "'>")</script>
<div id=topImage style=display:none></div>
<div id=mediaPlayer>
<script>document.write("<iframe id=youtubePlayer src=https://www.youtube.com/embed/" + this['youtubeList_' + youtubeNumber][0] + "?autoplay=1&enablejsapi=1 frameborder=0 allowfullscreen></iframe>")</script>
</div>
<script>listMode()</script>
<div id=bottomImage style=display:none></div>
</div>