iframe於響應式網頁設計(RWD)
嵌入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或播放器來解決這個問題,不過事實上的概念都是類似的。