Youtube iframe 自動縮放

13   Comments

youtube responsive
響應式設計通常會將內嵌物件(如:圖片、影片、文件)設計為自動縮放的狀態。如果不是自適應的網頁版寫入一般 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
Youtube iframe 自動縮放
Subject : Youtube iframe 自動縮放
Author : - Dream Talker Updated at: 11:06 PM
Votes : 100% - 5.0 - based on 2015
不是自適應的網頁版寫入一般 Youtube 影片的嵌入碼,在行動版很容易撐破版面。為了解決這個問題,大致有兩種作法:1. Javascript 計算式重新調整尺寸。2. CSS 區塊自動縮放。
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 我剛看了,我的應該是"行動版樣式寫在 裡",有兩個問題:
    1.]]>之前的語法是不論B或C都要放對吧?
    2.那C的話,要把A語法放在緊接""之後嗎?還是該放在哪裡?

    謝啦!

    ReplyDelete
    Replies
    1. 我沒看到實際的 xml 無法確定您的模板布局,但官方範本通常是網頁版、行動版共用樣式的。有時只放 A 段就可以,您先試試只放 A段,看看行動版有沒有效果。沒有,才需要加入 B 或 C。

      B 或 C 只需兩選一。 ]]></b:skin> 之前有沒有類似 /*----- Mobile -----*/ 這樣的註解?有的話應該是屬於 B 段。
      <b:if cond='data:blog.isMobile'> 的下方是不是 <style> 包住一些樣式?如果是的話,屬於 C 段,不過這通常是自訂樣式才會有這樣的寫法。

      Delete
    2. ok了!謝謝!我只放A段。

      我是選自訂樣式來改,目前大致上把我想要跟不想要出現在行動版上的東西做了一些篩選^^

      Delete
    3. 不用客氣!
      阿冠同學技術越來越精了!

      Delete
    4. 喔,我才要感謝Mark X的幫忙耶!一步步幫我解決需求,哈哈!

      Delete
  2. Anonymous5:19 PM

    to @Mark 幫了我大忙! 感恩!!
    from @Joe

    ReplyDelete
    Replies
    1. 很抱歉讓您久等了! :)

      Delete
  3. Anonymous8:45 PM

    你好啊~有個問題請教:
    我用了這個css,我的文章版面設定比較寬,影片在電腦版看起來有點大蠻恐怖的呦。要如何設定像您demo一樣控制它的尺寸?就是淺藍色那個。謝謝~

    潔琳

    ReplyDelete
    Replies
    1. 潔琳 妳好
      今天是陪伴小肥貓的親子日 :) 所以沒有寫文計畫。
      我下週再找時間寫示範,如有不便在此致歉。

      Delete
  4. 最近有鑒於範本太髒,所以歸零重新一步步把工具放入,今天再重新看這篇,我想確定一下 「1. Javascript 計算式重新調整尺寸。 2. CSS 區塊自動縮放。」是兩個方法二選一對不對?

    但是我只放1.的語法進去,不論是網頁版或行動版(我不是動態的行動版,就是blogger最陽春的那個版)都無法作用,一定要用2.的方法包夾才行。只放1.沒放2.的話,沒作用;只放2.沒放1.就可以了,所以目前我只有放2.。

    ReplyDelete
    Replies
    1. 範本太髒?阿冠用詞好好玩 XD

      兩種方法選其一。Javascript 的方法1,需要使用 jQuery 程式庫,或是注意 Youtube 的網址是不是 www.youtube.com 的網域格式?

      Delete
    2. 沒關係,那我用div那組就好。

      Delete