Youtube iframe 自動縮放

響應式設計通常會將內嵌物件（如：圖片、影片、文件）設計為自動縮放的狀態。如果不是自適應的網頁版寫入一般 Youtube 影片的嵌入碼，在行動版很容易撐破版面。
對於使用 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

---

Author Summary

Subject : Youtube iframe 自動縮放
Author : Unknown - Dream Talker Updated at: 11:06 PM
Votes : 100% - 5.0 - based on 2015
不是自適應的網頁版寫入一般 Youtube 影片的嵌入碼，在行動版很容易撐破版面。為了解決這個問題，大致有兩種作法：1. Javascript 計算式重新調整尺寸。2. CSS 區塊自動縮放。

Unknown

5 Stars - Reviews