大家有無發現我的文章內的影片好像會自己長大變正

因為蘇菲不才 Jquery跟javascript 就是沒學好

還好 有格友 Hunt 相助 就來引用一下 有興趣的人看下去呗



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


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

 

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

 

蘇非有提供一個網站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 寫的,所以第一行是引用Gogle提供的jQuery

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

第一個~

 

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

 

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

 

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

 

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

 

第二個~

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

以上~

 

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

 

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

 

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

 

文章標籤
創作者介紹

蘇菲工作站

sophiecat 發表在 痞客邦 PIXNET 留言(0) 人氣()