網頁設計, 網頁資源

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

梅干2018/03/06
梅問題-[工具] 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
網站名稱:Embed Responsively
網站連結:http://embedresponsively.com/

Step1
首先,進到「Embed Responsively」的網站後,可以從上方切換所需的平台。
梅問題-[工具] Embed Responsively線上iframe嵌入網站自適應產生器(YouTube、Vimeo、Dailymotion、Google Maps)
Step2
接著再把要嵌入的網址,複製並貼到Embed Responsively網站的輸入框中。
梅問題-[工具] Embed Responsively線上iframe嵌入網站自適應產生器(YouTube、Vimeo、Dailymotion、Google Maps)
Step3
再按後方的「Embed」鈕,這時下方就會產生相關語法,再將下方的語法複製起來。
梅問題-[工具] Embed Responsively線上iframe嵌入網站自適應產生器(YouTube、Vimeo、Dailymotion、Google Maps)
Step4
接著再依續的貼到網站中,這邊梅干建議,分別將html貼到body中,而style中的語法,則貼到css底下,完成後這樣子iframe就已支援自適啦!
梅問題-[工具] Embed Responsively線上iframe嵌入網站自適應產生器(YouTube、Vimeo、Dailymotion、Google Maps)
#範例預覽