Youtube iframe 自動縮放
對於使用 Blogger 範本的部落格，其行動版會自動將 Youtube 影片縮小，不過僅有一個最小尺寸。面臨現今多種螢幕解析的行動裝置似乎在文章編排上有些不足。如果是以網頁版 Content 版面替代行動版的方案則是會直接面臨內嵌物件超出版面的問題。
為了解決這個問題，大致有兩種作法： 1. Javascript 計算式重新調整尺寸。 2. CSS 區塊自動縮放。
先來看使用 CSS 的方式，我推薦使用這個方式，不過請記得將樣式也一併寫入 mobile 的樣式中。（搜尋範本內會有「mobile」的一區專門放特定樣式）推薦這個方式是因為有的範本不接受 Javascript 程式碼；例如 Blogger 動態範本。（以後會不會修正開放就不確定了）
我以網友提供的樣式語法做解析，其基本語法：
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
在文章內嵌影片語法時再添加 <div class="video-container"> </div> 這個區塊包住，格式如下：
<div class="video-container"> <iframe allowfullscreen width="420" height="315" frameborder="0" src="//www.youtube.com/embed/1234567"></iframe> </div>
基本上它會縮放，不過只算是解決一半的狀態。因為遇到不同的尺寸影片就變形了！我們應該要知道當中參數如何修改才算完整。
padding-top: 30px; - Youtube 內嵌影片會有個播放條（play bar），播放時 play bar 會自動消失。但我們將影片 100% 尺寸縮放時，這個播放控制器不會消失；會一直掛在下方，所以要增加這個高度。但 30px 是舊式的播放頭喔！現在要改成 padding-top: 35px;
padding-bottom: 56.25%; - 這是影響變形的原因。它的計算方式：高度 / 寬度。
也就是 16 : 9 時 - 9 / 16 = 56.25%
當您的影片是 4 : 3 時 - 3 / 4 = 75% ，直式影片 3 : 4 = 133%
所以沒有區分計算比例的樣式會變形，到時候美眉自拍影片瓜子臉變大餅臉，別說我沒有提醒您。
現在整理一下，如何在 Blogger 修改？
A. 模板備份後打開您的範本，在 ]]></b:skin> 之前加入以下樣式：
.iframe-16x9 {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.iframe-4x3 {
position: relative;
padding-bottom: 75%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.iframe-16x9 iframe, .iframe-4x3 iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
在文章內嵌影片時使用 <div class="iframe-16x9"> 去包夾即可。（視比例改 class 值）
<div class="iframe-16x9"> <iframe allowfullscreen width="560" height="315" frameborder="0" src="//www.youtube.com/embed/1234567"></iframe> </div>
B. 在行動版部份，搜尋 .mobile 樣式區域加入以下語法（網頁版架構當作行動版則免）
.mobile .iframe-16x9 {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.mobile .iframe-4x3 {
position: relative;
padding-bottom: 75%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.mobile .iframe-16x9 iframe, .mobile .iframe-4x3 iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
C. 或是您的範本有另外區隔行動版樣式，行動版樣式寫在 <b:if cond='data:blog.isMobile'> 裡面，將 A 部份的相同樣式再複製進去。
這個方式可以自訂各種比例，至少直式的影片不會有左右一大片黑框。請按左下切換鍵使用行動版縮放視窗看看實例比較：
原始內嵌方式
自動縮放樣式（為避免 Demo 影片過大，另外加了底框限制最大尺寸）
16 : 9 影片比例
16 : 9 影片縮放
同理，只要是使用 iframe 的物件我都能夠讓它自動縮放，如：地圖、日曆、影片、網頁﹍
但如果您會使用到不確定的尺寸，或有多種比例的物件需要縮放，我就會建議使用 Javascript 插件讓它自動縮放。這也適合很多舊文章免修改的懶人包。
Javascript 插件
使用 Javascript 插件算是一勞永逸的懶人包，這裡有個簡單的程式碼，適合已經加裝 jQuery 程式庫的部落格使用。將它安裝於 </body> 之前。
<script>
$(function() {
if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
YOUTUBE_VIDEO_MARGIN=5;
}
$('iframe').each(function(index,item) {
if($(item).attr('src').match(/http(s)?:\/\/www\.youtube\.com/)) {
var w=$(item).attr('width');
var h=$(item).attr('height');
var ar = h/w*100;
ar=ar.toFixed(2);
//Style iframe
$(item).css('position','absolute');
$(item).css('top','0');
$(item).css('left','0');
$(item).css('width','100%');
$(item).css('height','100%');
$(item).css('max-width',w+'px');
$(item).css('max-height', h+'px');
$(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
$(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
}
});
});
</script>
YOUTUBE_VIDEO_MARGIN=5; 是影片距離邊框的距離，數值可自訂。
當它遇到 Youtube 網址就會自動縮放，您也不用額外添加任何語碼。或者可以搜尋到其他 iframe 縮放插件，以支持更多的文件格式。缺點是這類 js 程式碼遇到模板已經有特定功能程式碼可能會衝突失效，最好先備份做測試。
參考資料：Skipser.com
