By

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有做一個範例，可參考。