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

最近接到一個需求，在手機上的 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 影片效果，可前往展示頁面，記得用手機來看：