Embed Responsively線上iframe嵌入網站自適應產生器(YouTube、Vimeo、Dailymotion、Google Maps)

　　現在在設計網頁時，自適應網頁也是基本的需求，讓網頁可以在任何的裝置上，自動縮放與排版，因此無論是電腦、平板、手機，都能正常的瀏覽網頁，除此之外自適應網頁，也有助於SEO的排名，所以現在在設計網時，要考量的層面，與以前相較下要來的複雜許多，除了版型的堆疊外，再來就是內部的元素，也要能隨著裝置，一一的來作調整，除了網頁內部的元素外，往往還會引用一些外部資源，像是Youtube影片、Google Map地圖，當要把這些資源嵌入到網站中，為了不影響網站的樣式，所以都會採用iframe的方式來嵌入。

　　由於iframe需要給寬高，這樣才能預覽iframe中的內容，雖然說寬度可以100%沒問題，但高度若是設為固定的情況下，就會出現在手機版時，影片就會變成廋長型，同時上下會大量留黑，因此這時就得針對iframe來進行CSS的設定，讓iframe在各個裝置解析下，高度能隨著調整，雖然說不難，但對於許多朋友來說，可能會感到有些麻煩，因此梅干最近發現一個超酷的平台，可將YouTube、Vimeo、Dailymotion、Google Maps….這些平台的iframe變成自適應的語法，再將產生出來的原始碼，貼到網頁中就大功告成啦！相當的簡易好上手，有需要的朋友也一塊來看看囉！

---

Embed Responsively

---

Step1
首先，進到「Embed Responsively」的網站後，可以從上方切換所需的平台。

---

Step2
接著再把要嵌入的網址，複製並貼到Embed Responsively網站的輸入框中。

---

Step3
再按後方的「Embed」鈕，這時下方就會產生相關語法，再將下方的語法複製起來。

---

Step4
接著再依續的貼到網站中，這邊梅干建議，分別將html貼到body中，而style中的語法，則貼到css底下，完成後這樣子iframe就已支援自適啦！

---

#範例預覽