| iFrame Player API |
iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API
Embed a YouTube player in your application.
developers.google.com
| Demo |
| Code |
<!-- HTML -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="YT_outer"></div> <!-- 유튭 비디오가 들어갈 자리 -->
</body>
</html>
/* CSS */
#YT_outer { width:1280px; height:auto; margin:auto }
#slist { text-align:center; margin-bottom:30px }
#slist span { padding:3px 10px; border:2px solid rgba(0,0,0,.6); border-radius: 20px; cursor:pointer }
Video ID는...
해당 비디오의 주소표시줄의 URL에서, 'watch?v=' 다음의 텍스트를 복사.
(ex) https://www.youtube.com/watch?v=04BUT00HCDY
또는, 공유 버튼 클릭 후 나오는 주소에서 'youtu.be/' 다음의 텍스트를 복사.
(ex) https://youtu.be/04BUT00HCDY
/* Jquery */
let plist = [];
/* plist = [["Video ID", "description"]] */
plist = [
["Hxu91RYjIVE", "한국인이 좋아하는 Old Pops"],
["JUeGb1JWW9E", "LP판으로 듣고 싶은 Old Pops"],
["04BUT00HCDY", "띵곡 팝송 2021"]
];
/* iframe (유튭 비디오)이 들어갈 레이어의 id는 수정할 수 없음 */
$("#YT_outer").append("<div id='player'></div>");
let sizeopt = 1; /* 0 = player hide || 1 = player show */
let Vw = "1280"; /* player width */
let Vh = "720"; /* player height */
let CTR = 1; /* 0 = player controller hide || 1 = player controller show */
let Loop = 1; /* 0 = loop Off || 1 = loop On */
let List = 1; /* 0 = List Off || 1 = List On */
if ( List == 1 ) {
/* 비디오 리스트가 들어갈 레이어 - 양자 택일 */
$("#YT_outer").prepend("<div id='slist'></div>"); /* 비디오 윗쪽에 */
$("#YT_outer").append("<div id='slist'></div>"); /* 비디오 아랫쪽에 */
/* 비디오 리스트 출력 */
for ( let si = 0; si < plist.length; si++ ) {
$("#slist").append("<span title='" + plist[si][1] + "'>" + (si + 1) + "</span> ")
}
}
const _0xbe86=['click','script','1XAZxgy','https://www.youtube.com/iframe_api','%c\x20Designed\x20By\x20땀똔','log','playVideo','destroy','ENDED','getElementsByTagName','1392550UIJzWD','860','0px','13XIAgDy','color:\x20crimson;\x20font-size:12px','none','Player','345045iAyXtF','target','123529ZFCmxQ','573','96748IWOKUr','src','player','1445375SywDNX','text','createElement','stopVideo','1407229LYgJRL','790351sIENcR','css','length','PlayerState','color:\x20#4aa3ff;\x20font-size:12px','#player'];const _0x12abed=_0x45ab;(function(_0x369b32,_0x35ddaf){const _0x5146ba=_0x45ab;while(!![]){try{const _0x4f8ac5=parseInt(_0x5146ba(0x1da))+parseInt(_0x5146ba(0x1ee))*parseInt(_0x5146ba(0x1e5))+-parseInt(_0x5146ba(0x1e1))+parseInt(_0x5146ba(0x1e6))+parseInt(_0x5146ba(0x1d6))*parseInt(_0x5146ba(0x1de))+-parseInt(_0x5146ba(0x1d3))+-parseInt(_0x5146ba(0x1dc));if(_0x4f8ac5===_0x35ddaf)break;else _0x369b32['push'](_0x369b32['shift']());}catch(_0x551cd8){_0x369b32['push'](_0x369b32['shift']());}}}(_0xbe86,0xcccef));sizeopt==0x0&&$(_0x12abed(0x1eb))[_0x12abed(0x1e7)]({'width':'0px','height':_0x12abed(0x1d5),'display':_0x12abed(0x1d8)});let pi=0x0,e=pi,tag=document[_0x12abed(0x1e3)](_0x12abed(0x1ed));tag[_0x12abed(0x1df)]=_0x12abed(0x1cc);let firstScriptTag=document[_0x12abed(0x1d2)]('script')[0x0];firstScriptTag['parentNode']['insertBefore'](tag,firstScriptTag);let player;function onYouTubeIframeAPIReady(_0x24512a){const _0x177006=_0x12abed;_0x24512a==plist[_0x177006(0x1e8)]&&(Loop==0x1?pi=0x0:stopVideo()),player=new YT[(_0x177006(0x1d9))](_0x177006(0x1e0),{'width':_0x177006(0x1d4),'height':_0x177006(0x1dd),'videoId':plist[pi][0x0],'playerVars':{'autoplay':0x1,'controls':CTR},'events':{'onReady':onPlayerReady,'onStateChange':onPlayerStateChange}});}function onPlayerReady(_0x309fdd){const _0x11e638=_0x12abed;_0x309fdd[_0x11e638(0x1db)][_0x11e638(0x1cf)](),_0x309fdd['data']==-0x1&&_0x309fdd['target'][_0x11e638(0x1cf)]();}let done=![];function _0x45ab(_0x2374bc,_0x3e8080){_0x2374bc=_0x2374bc-0x1cc;let _0xbe864d=_0xbe86[_0x2374bc];return _0xbe864d;}function onPlayerStateChange(_0x4fea1f){const _0x4c0b1b=_0x12abed;if(_0x4fea1f['data']==YT[_0x4c0b1b(0x1e9)][_0x4c0b1b(0x1d1)]){pi++;let _0x2511f3=pi;player['destroy'](),onYouTubeIframeAPIReady(_0x2511f3);}}function stopVideo(){const _0xe78d3=_0x12abed;player[_0xe78d3(0x1e4)]();}$('#slist\x20span')[_0x12abed(0x1ec)](function(){const _0x369a58=_0x12abed;let _0x564138=$(this)[_0x369a58(0x1e2)]();_0x564138=_0x564138-0x1,player[_0x369a58(0x1d0)](),_0x192b43(e,_0x564138);function _0x192b43(_0x4707aa,_0x3df10a){const _0x4ccd21=_0x369a58;pi=_0x3df10a,player=new YT['Player'](_0x4ccd21(0x1e0),{'width':'1280','height':'720','videoId':plist[pi][0x0],'playerVars':{'autoplay':0x1,'controls':CTR},'events':{'onReady':onPlayerReady,'onStateChange':onPlayerStateChange}});}}),console[_0x12abed(0x1ce)]('%c\x20Youtube\x20Player\x20Control\x20by\x20iFrame\x20API',_0x12abed(0x1d7)),console[_0x12abed(0x1ce)](_0x12abed(0x1cd),_0x12abed(0x1ea));
