최근 youtube 동영상이 iframe으로 바뀌는 바람에 일반 사용자가 쉽게 youtube 동영상을 게시판에 삽입할 수가 없게 되었습니다.

다행히 jwplayer에서 최근 youtube 동영상을 지원하기 시작하였기에 이를 활용하여 youtube 동영상을 embed 태그나 iframe 태그 없이 XE에 내재된 멀티미디어 삽입 컴포넌트를 가지고 이용하는 방법을 소개하고자 합니다.

주의 core의 common.js 파일을 변경하므로, 전문적인 지식이 없으신 분들은 수정전 파일을 백업을 꼭 하셔야 합니다. 수정으로 인한 보안 및 안전에 대한 책임은 본인이 지셔야 합니다.

1. 최신의 JWplayer를 다운 받습니다.

http://www.longtailvideo.com/players/jw-flv-player/

다운 받으실 때, Include Viral, a video sharing plugin 체크를 끄고 다운받으시기 바랍니다 (그래야 동영상 공유화면이 자동으로 뜨지 않습니다)


2.. 다운 받으신 파일을 여시고 파일 내용중에 player.swf 파일을 flvplayer.swf 으로 이름을 바꾸신 이후에
XE 설치 폴더/common/tpl/images/flvplayer.swf 에 덮어 써 주시기 바랍니다.

3. 다운 받으실 폴더에서 jwplayer.js 를 복사하셔서 XE 설치 폴더 내에 임의의 폴더에 복사하시기 바랍니다.
예) XE 설치 폴더/layouts/xe_official/js/jwplayer.js

4. 지금 사용하시고 있는 레이아웃 상단에 위에 옮겨 놓은 js를 loading 하는 스크립트를 작성합니다

레이아웃 편집에서 최상단에 아래 코드 삽입

<load target="위에 복사하신 폴더명/jwplayer.js" type="text/javascript"/>

5. XE 설치 폴더/common/js/common.js 에서 _displayMultimedia 함수를 찾고, 아래 조건문을 삽입

else if(/^(https?:\/\/)?(youtu\.be)*/i.test(src)){
var myplayerid = "youtube_player_" + Math.floor(Math.random() * 10000000);
html = '<div id="'+myplayerid+'" align=center><a href='+src+" target="'+myplayerid+'">Click to watch the video (동영상을 보시려면 클릭하세요)</a></div>';
html += '<script type="text/javascript">';
html += '  jwplayer("'+myplayerid+'").setup({';
html += '    "flashplayer": "'+request_uri+'common/tpl/images/flvplayer.swf",';
html += '    "file": "'+src+'",';
html += '    "controlbar": "bottom",';
html += '    "width": "'+width+'", "height": "'+height+'", "autostart": "'+autostart+'"';
html += '  });';
html += '</script>';
}
6. 멀티미디어 삽입 컴포넌트에서 youtube 공유 주소를 붙여 넣어 삽입해 보십시요~
이제 iframe이나 embed 없이도 youtube 동영상을 XE에 삽입하실 수 있습니다.