Youtube와 Vimeo 동영상을 Add-on으로 삽입하는 버그 수정 > 버그 & 건의

Youtube 동영상 주소 https://www.youtube.com/embed/ZIr2vq-qnlA 를 게시글 상단에 삽입하고자 할 경우,

이윰 테마는 게시판의 동영상 Add-On 기능 즉, 버튼을 클릭한 후, 다음 그림과 같이 동영상주소를 입력하고 "적용하기" 버튼을 클릭하면, 게시글 상단에 동영상 재생을 위한 iframe 부분을 자동삽입합니다.

하지만, 게시글이 저장될 때 동영상 주소가 제대로 Parse되지 않는 바람에 Youtube 동영상 주소를 삽입되지 않는 버그가 있습니다.

[ 동영상 Embed 에러가 발생한 화면 ]

버그가 발생한 html 쏘스를 살펴 보면 다음과 같이 embed/다음에 동영상 주소 중 ZIr2vq-qnlA라는 문자열이 보이지 않는 것을 확인할 수 있습니다.

<div class="board-view-atc">
    <h2 class="board-view-atc-title">본문</h2>
    <div class="board-view-file-conts">
        <div id="bo_v_img"></div>
    </div>
    <div class="board-view-con view-content">
        <p>
            <div class='responsive-video'>
                <iframe width="600" height="360" src="http://www.youtube.com/embed/?wmode=opaque&autohide=1" frameborder="0" allowfullscreen></iframe>
            </div>
            </a>
        </p>

이 버그는 /eyoom/class/bbs.class.php 파일을 다음 git diff와 같이 수정하면 됩니다.

# git diff
diff --git a/eyoom/class/bbs.class.php b/eyoom/class/bbs.class.php
index 360a9ac..f71f5e7 100644
--- a/eyoom/class/bbs.class.php
+++ b/eyoom/class/bbs.class.php
@@ -407,18 +407,23 @@ class bbs extends eyoom
             case 'youtube.com':
                 if ($src[1]) {
                     $video['key1'] = $src[1];
+                } elseif ($info['path']) {
+                    $video['key1'] = preg_replace("/\/embed\//i","",$info['path']);
                 } else {
-                    $video['key1'] = $query['v'];;
+                    $video['key1'] = $query['v'];
                 }
                 break;

             /**
              * Vimeo
              */
+            case 'player.vimeo.com':
             case 'vimeo.com':
                 if ($src[1] && $src[2]) {
                     $video['key1'] = $src[1];
                     $video['key2'] = $src[2];
+                } elseif ($info['path']) {
+                    $video['key1'] = preg_replace("/\/video\//i","",$info['path']);
                 } else {
                     $data = $this->get_video_use_curl($video_url, $host);
                     $video['key1'] = $data['vid'];
@@ -616,6 +621,7 @@ class bbs extends eyoom
             /**
              * Vimeo
              */
+            case 'player.vimeo.com':
             case 'vimeo.com':
                 preg_match('/\<meta property=\"og:url\"\scontent=\"(?P<vid>[a-zA-Z0-9:\/\._]+)\"/i', $output, $scrapping);
                 $out['vid'] = $this->get_video_key($this->eyoom_host($scrapping['vid']));
@@ -730,35 +736,36 @@ class bbs extends eyoom
             case 'youtu.be':
             case 'youtube.com':
                 $vlist = $video['key2'] ? '&list='.$video['key2'] : '';
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://www.youtube.com/embed/'.$video['key1'].'?wmode=opaque&autohide=1'.$vlist.'" frameborder="0" allowfullscreen></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//www.youtube.com/embed/'.$video['key1'].'?wmode=opaque&autohide=1'.$vlist.'" frameborder="0" allowfullscreen></iframe>';
                 break;
             case 'tvcast.naver.com':
             case 'tv.naver.com':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid='.$video['key1'].'&outKey='.$video['key2'].'&controlBarMovable=true&jsCallable=true&skinName=tvcast_black" frameborder="no" scrolling="no" marginwidth="0" marginheight="0"></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid='.$video['key1'].'&outKey='.$video['key2'].'&controlBarMovable=true&jsCallable=true&skinName=tvcast_black" frameborder="no" scrolling="no" marginwidth="0" marginheight="0"></iframe>';
                 break;
+            case 'player.vimeo.com':
             case 'vimeo.com':
                 $source = '<iframe src="//player.vimeo.com/video/'.$video['key1'].'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
                 break;
             case 'ted.com':
-                $source = '<iframe src="https://embed-ssl.ted.com/talks/'.$video['key1'].'.html" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" scrolling="no" allowFullScreen></iframe>';
+                $source = '<iframe src="//embed-ssl.ted.com/talks/'.$video['key1'].'.html" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" scrolling="no" allowFullScreen></iframe>';
                 break;
             case 'tvpot.daum.net':
             case 'tv.kakao.com':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://videofarm.daum.net/controller/video/viewer/Video.html?vid='.$video['key1'].'&play_loc=undefined&wmode=opaque" frameborder="0" scrolling="no"></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//videofarm.daum.net/controller/video/viewer/Video.html?vid='.$video['key1'].'&play_loc=undefined&wmode=opaque" frameborder="0" scrolling="no"></iframe>';
                 break;
             case 'channel.pandora.tv':
             case 'pan.best':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://channel.pandora.tv/php/embed.fr1.ptv?userid='.$video['key2'].'&prgid='.$video['key1'].'&skin=1&autoPlay=false&share=on" frameborder="0" allowfullscreen></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//channel.pandora.tv/php/embed.fr1.ptv?userid='.$video['key2'].'&prgid='.$video['key1'].'&skin=1&autoPlay=false&share=on" frameborder="0" allowfullscreen></iframe>';
                 break;
             case 'dailymotion.com':
             case 'dai.ly':
-                $source = '<iframe frameborder="0" width="'.$video['width'].'" height="'.$video['height'].'" src="http://www.dailymotion.com/embed/video/'.$video['key1'].'"></iframe>';
+                $source = '<iframe frameborder="0" width="'.$video['width'].'" height="'.$video['height'].'" src="//www.dailymotion.com/embed/video/'.$video['key1'].'"></iframe>';
                 break;
             case 'facebook.com':
-                $source = '<iframe src="https://www.facebook.com/video/embed?video_id='.urlencode($video['key1']).'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0"></iframe>';
+                $source = '<iframe src="//www.facebook.com/video/embed?video_id='.urlencode($video['key1']).'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0"></iframe>';
                 break;
             case 'slideshare.net':
-                $source = '<iframe src="https://www.slideshare.net/slideshow/embed_code/'.$video['key1'].'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe>';
+                $source = '<iframe src="//www.slideshare.net/slideshow/embed_code/'.$video['key1'].'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe>';
                 break;
             case 'sendvid.com':
                 $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//sendvid.com/embed/'.$video['key1'].'" frameborder="0" allowfullscreen></iframe>';
@@ -766,11 +773,11 @@ class bbs extends eyoom
             case 'youku.com':
             case 'v.youku.com':
             case 'player.youku.com':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://player.youku.com/embed/'.$video['key1'].'" frameborder="0" allowfullscreen></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//player.youku.com/embed/'.$video['key1'].'" frameborder="0" allowfullscreen></iframe>';
                 break;
             case 'iqiyi.com':
             case 'player.video.qiyi.com':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid='.$video['key1'].'&tvId='.$video['key2'].'" frameborder="0" allowfullscreen></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid='.$video['key1'].'&tvId='.$video['key2'].'" frameborder="0" allowfullscreen></iframe>';
                 break;
         }
         if ($source) {

덧붙여, W3C의 가장 최근 권고안에 의거하면 http:// 혹은 https://라는 표현보다는 그냥 //만으로 표기하는 것이 바람직합니다. 따라서, 같은 PHP 파일의 private function video_source($video) 함수를 찾아서 src="http:// 혹은 src="https://을 모두 src="//로 변경하시기 바랍니다.

위와 같이 변경하면 다음 그림과 같이 제대로 동영상이 잘 재생됩니다.

Youtube 동영상 외 Vimeo 동영상에 대해서도 추가 시험하였고 iframe 삽입 버그를 수정하였습니다.

다음 첨부파일은 버그를 수정한 bbs.class.php입니다. eyoom/class/ 폴더에 복사해 넣으시면 됩니다.