Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計

當前網頁設計趨勢是使用「自適應網頁設計」（Responsive web design，RWD）技術，讓網頁可隨著不同螢幕大小自動調整排版，而現階段行動裝置相當普及，為了讓每個裝置都能正常瀏覽網頁，自適應網頁設計幾乎已成必備，或是針對行動裝置開發「手機版」網頁，不過兩者都有各自的優缺點，還是得評估網站型態才能選擇。

若你的網站已經支援自適應網頁設計，那麼會很希望每個嵌入頁面的元件都可隨著裝置大小來自動調整顯示範圍，但當前不是所有的網路服務都支援 RWD，暫時的解決方案是透過網路服務來將原有程式碼轉換為支援自適應網頁設計的程式碼。

本文要介紹的「Embed Responsively」是一款免費、開放原始碼線上工具，可以將幾個常用服務包括 YouTube、Vimeo、Dailymotion、Google Maps、Getty Images 或一般 iFrame 語法轉為具有自適應網頁設計的代碼，貼到頁面後就能隨著裝置自動調整大小，非常實用！

不過當前已經有一些網路服務的內嵌語法支援自適應功能，例如 Scribd、SoundCloud、Storify 和 Twitter，在其他服務陸續支援此功能前，可透過 Embed Responsively 來轉換原始碼。

網站名稱：Embed Responsively
網站鏈結：https://embedresponsively.com/

使用教學

STEP 1

Embed Responsively 使用方式很簡單，開啟網頁、選擇要轉換的線上服務，然後依照指示把網址或程式語法貼上就能轉換。

舉例來說，YouTube 是直接貼上影片頁面網址，貼上後按下「Embed」就會在最下方顯示支援自適應網頁設計的嵌入程式碼，全選複製然後貼到自己的網站就能看到效果。

STEP 2

Google Maps 將地圖嵌入網站的功能目前也還沒有支援自適應網頁設計 RWD，不過一樣可以透過 Embed Responsively 來產生新的程式碼，設定方式跟 YouTube 有些不太一樣，必須先從嵌入地圖功能來獲取 iFrame 內嵌程式碼。

回到 Embed Responsively 將程式碼貼上，就能轉換成具有自適應設計的 Google Maps。

STEP 3

直接將 Embed Responsively 轉換出來的程式碼貼到網站、部落格，如果平台支援 iFrame 程式碼就能看到效果，不一樣的是因為支援自適應網頁設計技術，當你將視窗放大、縮小時嵌入的資源就會自動調整到最佳顯示效果。