RWD - 嵌入iframe (Google Map, YouTube)

by on # css

Google Map, YouTube提供了以iframe的方式讓用戶嵌入自己的網頁中。
但要如何讓iframe可以做到RWD呢?
我們直接來看css(下方語法是sass)

.container
  width: 100%
  height: 0
  background-color: #ccc
  padding-bottom: 56.25%  
  //YouTube原本的w:560, h:315
  //若想跟YouTube長寬比完全一樣
  //padding-bottom得設置如下
  //(315/560)*100%=56.25%
  position: relative
  >iframe
    position: absolute
    width: 100%
    height: 100%

也就是在iframe外面加一個div,並設定padding-bottom: 56.25%,可以讓iframe縮放後維持與原本相同的長寬比。

下面我在CodePen有做一個範例,可參考。

CodePen, RWD, iframe, Google Map, Youtube
comments powered by Disqus