2016年6月13日

讓手機版網頁 Youtube 影片能自動調整寬高尺寸

A+
最近接到一個需求,在手機上的 Youtube 內嵌 Iframe 影片會超出版面,希望能解決這個異常現象。

會發生這個狀況,主要是 Youtube 提供的內嵌程式碼,預設尺寸大致為 560px 寬、315px 高,這樣的數值在網頁版是 ok 的,但手機的話寬度就不夠了。

由於一個網站的文章數可能有上百、數千篇,要一篇篇改不太可能,只能寫 JS 來一次處理。

安裝本篇的程式碼後,會針對手機版的 Youtube 影片做處理,無論訪客手機的螢幕尺寸多大,或是怎麼翻轉手機、切換直立橫躺的方向,都會讓影片能夠符合行動裝置的螢幕寬度



<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


(圖片出處: pexels.com)


一、Blogger 手機版效果


本篇的程式碼適用各種網頁平台,不過 Blogger 的狀況會稍微不同,因此特別說明一下。

1. Blogger 的優點

因為 Blogger 與 Youtube 同為 Google 旗下的產品,相容度還算不錯,基本上在 Blogger 網站內嵌了 Youtube 影片後,在手機版是不會發生破屏的慘狀,保證影片寬度絕對會在手機螢幕範圍之內。

其原理跟「加快 Blogger 行動版圖片載入速度的密技」類似,從 Blogger 後台上傳到 Picasa 圖床的圖片,經設定尺寸後,那麼行動版的圖片,就會自動縮小為 280px 寬,可以大大提升載入網頁的速度。

而 Youtube 影片也是一樣,設定了內嵌 Iframe 的尺寸後,在 Blogger 手機版的畫面,Youtube 也會自動縮小,改以 280px 寬來呈現,所以絕對不會破版。


2. Blogger 的缺點

Youtube 在 Blogger 行動版自動縮小 280px 寬的設計,算是非常貼心,但是還不夠好,因為現在手機螢幕尺寸越來越大,再加上手機螢幕橫躺時,280px 看起來就相當小了,有可能連一半的寬度都不到

因此比較好的設計,是讓 Blogger 行動版的 Youtube 影片,能隨著不同螢幕尺寸、或直立橫躺的狀態,都以符合螢幕寬的尺寸呈現,這也是本篇程式的設計重點。



二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 安裝 jQuery

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。


2. 安裝程式碼

接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


這個小工具只有 E 行的紅色參數需要修改,通常使用預設值即可。如想要使用不同的的長寬比例,請再自行調整。

想要先看手機上,經過調整的 Youtube 影片效果,可前往展示頁面,記得用手機來看:




三、聯絡表單


加值文章關閉留言板功能,使用上有任何問題請用下面的表單與我聯繫:



更多行動版技巧:


更多 Youtube 相關工具:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。