EddyChang

iframe於響應式網頁設計(RWD)

Eddy標籤: Joomla3.x, RWD點擊數: 24049
View Comments

Sample Image

嵌入Google地圖iframe碼

這次辦活動的頁面插入了Google Map所提供的嵌入碼，它是一個iframe的碼例如這是台灣總統府的Google地圖：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.8299385809332!2d121.50972681535653!3d25.039844744210242!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a90a870e5af1%3A0x180e1a442209d1c1!2zMTAw5Y-w5YyX5biC5Lit5q2j5Y2A6YeN5oW25Y2X6Lev5LiA5q61MTIy6Jmf57i957Wx5bqc!5e0!3m2!1szh-TW!2stw!4v1454501084561" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

這個代碼插入到網頁後，用手機看會寬度跑掉。因為上次插入Youtube影片也有同樣的情況，找到的這次的解法也是類似，網路上就查得到如何解決這個問題。

這個解決方案大約是在2009年就有人提出了，算是一種利用CSS修正不同瀏覽器顯示與ifram嵌入的技巧，當時並還沒有響應式網頁設計的風潮。最初的提出解決的方式，是這篇文章：Creating Intrinsic Ratios for Video，"Intrinsic Ratios"中譯是"內在比例"的意思。

解決方法

首先把需要的樣式加入CSS檔案中：

.iframe-rwd {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

再來是加入Google地圖的iframe程式碼，外面再包一個div：

<div class="iframe-rwd">
    <!--這裡是貼上Google地圖的嵌入iframe碼 -->
    <iframe>...</iframe>
</div>

這樣就解決了。

其他情況：嵌入Youtube影片

Youtube影片嵌入的方式也很類似，以下是它的CSS樣式：

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML的影片嵌入處的碼：

<div class="videoWrapper">
    <!-- 這裡是貼上YouTube的嵌入iframe碼-->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

這CSS碼大概只有兩條不同，在外圍的那個div用的css類別中：

  • padding-bottom: 56.25%; ：這個其實是9除以16的寬高比。
  • padding-top: 25px;：這個應該是修正用的高度，避免內嵌的那個iframe上面被截掉，用25px或30px差不多。

其他也有使用Javascript或播放器來解決這個問題，不過事實上的概念都是類似的。

參考資料