blogger 內嵌影片 無法顯現的 bug

話說前一篇文章 觸控環境的網頁 UI 設計，我在開頭內嵌了一個 YouTube 影片，並且在影片之後安插了 "繼續閱讀" ( read more、<!-- more --> ) 標記，滿心歡喜地發表後，原以為就此國泰民安風調雨順了，但身為一個老經驗的網路 垃圾 人，敏銳的直覺告訴我事情沒那麼單純，果不其然......

內嵌影片在 Google Chrome, Safari, Opera 都可以正常顯示，但在 IE, Firefox 中都顯示不出來，按了 "繼續閱讀" 之後則恢復正常顯示，查了一下好像很少人在討論這個問題，最後在一位神秘的 "角度人" 協助下，此問題終於獲得解答，可以請參考這個老外的 網誌文章。

根據那位 頭髮好長的好心歪國部落客 的說法，文章使用 "繼續閱讀" 標記的摘要模式下，blogger 會將 <embed> tag 濾掉，一旦點了 "繼續閱讀" 顯示完整文章之後，一切就恢復正常，由此看來... 不只是 YouTube 影片，只要是用到內嵌語法的都可能有此問題，但在官方解決這個問題之前，只好自立自強，自行手動解決囉~


舉我的例子來說，從 youtube 直接複製的 embeded code 長這樣：

<object height="385" width="480">
<param name="movie" value="http://www.youtube.com/v/Q9NP-AeKX40"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q9NP-AeKX40" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object>


修正的方法只要加上紅色的部分即可：

<object height="385" width="480" type="application/x-shockwave-flash" data="http://www.youtube.com/v/Q9NP-AeKX40">
<param name="movie" value="http://www.youtube.com/v/Q9NP-AeKX40"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q9NP-AeKX40" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object>


請注意，data="這邊得填你想內嵌的影片網址" (這麼細節都提醒，在這個冷酷的社會實屬難得啊！)

附帶一提，本部落格的名稱 "有機垃圾誌"，在 Google Chrome 底下看，僅存一個 "有" 字，實驗發現，只要是 "機" 後面的字元都顯示不出來，(乃真機車也)，此問題未解之前，本網誌只能背負著此殘破的名稱踽僂前行，(知道解法的人快來解除我的封印吧！)。

不同瀏覽器的支援實乃網頁開發者的悲歌啊~ (嘆)