[指南] Embed Responsively 幫助 Google Maps, Youtube ….等加上自適應 RWD 效果 @地瓜大的飛翔旅程

章節連結

操作步驟

HTML 部分
CSS 部分
Mobile 版本
Desktop 版本

最近常會有需要轉貼 Google Maps, Youtube, Vimeo 之類的 iFrame 到網頁上，或是內嵌到某個網站內。但是要從頭調整成滿版的 RWD 版本，那麼得用 CSS 自行調整好一陣子。這個 Embed Responsively 可以幫助你解決這個問題，同時可以參考它的 CSS 寫法，加到自己的 Mixin 資料庫內。
css

操作步驟

1. 進入 Embed Responsively 網站後，選擇正確的網站標籤，貼上對應的網址

2. 接著會產生對應的 Code。分為兩個部分：CSS and HTML

HTML 部分

// 外框用一個 container 包住 iFrame
<div class='embed-container'>
    <iframe src='https://www.youtube.com/embed/Wcgd1oCbW4g' frameborder='0'
      allowfullscreen>
     </iframe>
</div>

// 外框用一個 container 包住 iFrame

allowfullscreen>

</iframe>

</div>

CSS 部分

// 靠著 padding-bottom 將畫面撐開，且去掉原本的黑框
.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0;
  overflow: hidden; 
  max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}