自動調整文章內影片大小

2015021013:14

本文引用自blogbackup - 自動調整文章內影片大小

 

div class="article-body">

今天要分享的是格友蘇菲問過的一個問題

蘇菲想要讓文章內的影片自動調整大小

蘇非有提供一個網站http://fitvidsjs.com的教學

因為不是很清楚該怎麼套用,所以請我幫忙看一下

這程式正確來說..應該是讓該影片在網頁裡所屬區塊內會自動放到最大

當我們將瀏覽視窗縮小時,影片大小也會自動縮小,避免畫面被截掉

該網站也放了一段影片說明,可以大概了解到程式的功能

網站說明目前支援的影片有YouTube,Vimeo,Blip.tv,Viddler,Kickstarter

接下來就是如何將語法套用到自己的部落格

完整的語法如下(適用痞客邦)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://fitvidsjs.com/js/jquery.fitvids.js"></script>

<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#main").fitVids();
});
</script>

因為該程式是用jQuery 寫的,所以第一行是引用Google提供的jQuery

第二行是直接拿該教學網站的jquery.fitvids.js來用,這是主程式,網站也有提供該js下載

自架網站的可以直接下載回去放到自己的網站裡使用

倒數第三行就是我們需要修改的地方

要讓程式知道影片是放在哪個區塊位置

上面語法設定的位置是 #main

#main是痞客邦的文章區塊,包含文章跟側邊欄位

所以只要影片是放在文章裡或是設邊欄位裡都會自動調整大小喔~

再來就是要把該語法放到哪去????

上面囉哩八嗦一堆的看不懂沒關係,先把語法複製起來

然後貼到下面兩個位置其中之一即可..

第一個~

管理後台 --> 基本/進階設定 或直接連到 http://panel.pixnet.cc/blog/config

左邊有個 [部落格描述] ,原本的內容不用變更

將語法貼到原本內容的後面

然後按下右下角的[儲存設定]就好囉~

第二個~

管理後台 --> 側邊欄位設定 或直接連到 http://panel.pixnet.cc/blog/sidecolumn

再右邊點選[新增板位] ,把語法貼到 [自訂欄位內容]

[自訂欄位標題] 我的建議是輸入 <!-- 隨便你打 -->

<!-- --> 這東西是個註解,所以不會出現在網頁上

因為加上的語法是不會出現在網頁上,所以沒有人會想只顯示個標題在那邊吧

版位新增後會再右邊的[版位暫存區]最下面,記得要將他拖放到[側欄1]或是[側欄2]

最後再按下右下角的[儲存版位]

以上~

提醒格友,在複製Youtube影片的崁入語法時,網頁上Youtube語法下面有三個勾選項目

請勾選 [使用舊版內嵌程式碼] ,這樣調整大小的程式才有作用喔~

有什麼問題再留言讓我知道吧!