xoops更新youtube語法並相容Bootstrap3的RWD(補充舊文相容)

由於Youtube近年陸續有幾個小更動

雖然網址大致上沒有變，但一些小地方會影響正規表達式的判斷

並且近年來自適應網頁太重要了，網頁中的Youtube如果沒有RWD就會破版，

然後Flash也太糟糕了，所以全面使用HTML5更是當務之急

而xoops應用在newbb裡的DHTML編輯器，內建的Youtube語法基本上是Flash專用，並且是固定長寬，

已經不符合現代使用，故hack了新的寫法，讓編輯器符合以下幾項要求

強制https
同時相容www.youtube.com標準網址及youtu.be短網址
強制使用HTML5，相容行動裝置瀏覽，不再使用Flash
使用Bootstrap3的Responsive embed，讓影片可依16:9或4:3自動RWD
在行動裝置中可進行全螢幕播放

會更動到的檔案如下

內建Youtube編輯程式
\class\textsanitizer\youtube\youtube.php

語系檔英文
\language\english\formdhtmltextarea.php

語系檔中文
\language\tchinese_utf8\formdhtmltextarea.php

修改步驟

step1. 修改\class\textsanitizer\youtube\youtube.php 共4個地方

OLD 原程式影片寬高為寫死的

var text2 = prompt(enterFlashWidthPhrase, "425");
var text3 = prompt(enterFlashHeightPhrase, "350");

Change 修改為比例，預設為16:9，若你的影片大都是4:3亦可在此修改預設值

var text2 = prompt(enterFlashWidthPhrase, "16");
var text3 = prompt(enterFlashHeightPhrase, "9");

OLD 原本的Alert是與圖片等其他功能共用語系的

. htmlspecialchars(_XOOPS_FORM_ALT_ENTERHEIGHT, ENT_QUOTES)
. "\",\"" . htmlspecialchars(_XOOPS_FORM_ALT_ENTERWIDTH, ENT_QUOTES)

Change 修改為Youtube專用的Alert提示文字

. htmlspecialchars(_XOOPS_FORM_ALT_YOUTUBEHEIGHT, ENT_QUOTES)
. "\",\"" . htmlspecialchars(_XOOPS_FORM_ALT_YOUTUBEWIDTH, ENT_QUOTES)

OLD 原程式只判斷一般網址

if (!preg_match("/^http:\/\/(www\.)?youtube\.com\/watch\?v=(.*)/i", $url, $matches)) {
    trigger_error("Not matched: {$url} {$width} {$height}", E_USER_WARNING);

    return "";
 }
$src = "http://www.youtube.com/v/" . $matches[2];

Change 修改為加入https及長短兩種網址的判斷，因為我php及正規表達式都很爛，底下的程式邏輯很笨，請高手幫我優化

if (preg_match("/^http[s]?:\/\/(www\.)?youtu\.be\/(.*)/i", $url, $matches) ) { }
elseif (preg_match("/^http[s]?:\/\/(www\.)?youtube\.com\/watch\?v=(.*)/i", $url, $matches)) { }
else{
	trigger_error("Not matched: {$url} {$width} {$height}", E_USER_WARNING);
	return "";
	}

$src = "https://www.youtube.com/embed/" . $matches[2];

OLD 原程式為Flash的object

$code = "<object width='{$width}' height='{$height}'><param name='movie' value='{$src}'></param>" .
        "<param name='wmode' value='transparent'></param>" .
        "<embed src='{$src}' type='application/x-shockwave-flash' wmode='transparent' width='425' height='350'></embed>" .
        "</object>";

Change 修改為bootstrap3的embed-responsive，寬高亦符合css裡的16by9跟4by3

$code = "<div class='embed-responsive embed-responsive-{$width}by{$height}'>" .
        "<iframe frameborder='0' class='embed-responsive-item' src='{$src}?controls=1&showinfo=0&rel=0&disablekb=1' allowfullscreen></iframe></div>";

step2. Insert language插入新增語系檔共2個地方

英文請改 \language\english\formdhtmltextarea.php ，我的英文很爛，歡迎幫忙修訂XD

define('_XOOPS_FORM_ALT_YOUTUBEHEIGHT','(Video 16:9 or 4:3) input Height 9 or 3 :');
define('_XOOPS_FORM_ALT_YOUTUBEWIDTH','(Video 16:9 or 4:3) input Width 16 or 4 :');

中文請改 \language\tchinese_utf8\formdhtmltextarea.php

define("_XOOPS_FORM_ALT_YOUTUBEHEIGHT", "(影片比例16:9與4:3) 請輸入高 9 或 3 :");
define("_XOOPS_FORM_ALT_YOUTUBEWIDTH", "(影片比例16:9與4:3) 請輸入寬 16 或 4 :");

成果發表

在newbb中的DHTML編輯器，點擊Youtube外掛，貼上網址，先測試短址

輸入影片的寬，預設為16

輸入影片的高，預設為9

在文字框中出現剛才打的Youtube代碼，並加碼測試4:3及一般網址

使用電腦的瀏覽器觀看，兩種網址都成功，因為影片是16:9的，所以一個有黑邊，一個沒有～

拿出手機看看，順利的自適應RWD，並且兩個比例亦都正常

打完收工，如果其他模組用的不是內建的編輯器，就沒有用了，因為這是內建專用的～

希望xoops下一版內建的Youtube程式碼是更好用的 XDD

＜補充＞

若網站裡已經有許多文章用了舊的code，不想一篇一篇修改的話，

可以再加上幾個判斷，就可向下相容舊語法～

找到此行

$src = "http://www.youtube.com/embed/" . $matches[2];

並在底下增加內容

if (empty($width) || empty($height))
{$width = 16;$height = 9;}
 if (($width) > 16 ||($width) > 9)	
{if (($width / $height) > 1.5)
{$width = 16;$height = 9;}
else {$width = 4;$height = 3;} }

邏輯是，判斷若為空值，則自動填上16:9

若寬大於16，高大於9（也就是原本的pixel）

則計算比例，寬除以高，大於1.5的則是16:9，小於1.5的，則為4:3

（正常16:9為1.7，4:3為1.3）

以上，新舊相容完美寫法 done !

同步發表於xoops.org官方網站論壇 hack版～

http://xoops.org/modules/newbb/viewtopic.php?topic_id=77063

09-25 關於本站復古點陣字型...