利用 CSS 做出響應式的 iframe (youtube video)

上次介紹了 position 中 relative 、absolute 幼幼班等級的應用  傳送門

這次我們要結合 iframe 標籤,在網頁中嵌入 Youtube 影片並完成響應式的設計。

 

iframe 是什麼?

 

簡單來說就是將外部的網站嵌入到你的網站上,一般常見的有Youtube 、Google Map 等設計,若對 iframe 還不太了解也可以參考 MDN 上介紹及相關屬性設定。

 

若想在網頁中嵌入影片,Youtube 是一個非常好用的平台

不僅省下了影片的存放空間,影片在各瀏覽器、裝置上的支援度也相當高,

最重要的嵌入代碼也貼心的幫你準備好了,我們只要會複製、貼上就可以了 XD

 

如何在 Youtube 上取得 iframe 這裡就不多說明,網路上已經有許多詳細的教學可以參考。

 

取得代碼後,用一層 div 包覆 iframe 加上你喜歡的 class 名稱,這邊使用 video-wrapper。

 

 

CSS 部分

 

padding-bottom(top): 56.25% 讓影片的寬高比為 16:9,

padding-bottom(top): 75% 則寬高比為 4:3 ;

最後為了確保能將影片超出的內容隱藏,所以添加一行 overflow: hidden;

 

如此一來就完成了基本的響應式 iframe 設計,

在這邊提供一個在 CODEPEN 上看到很酷的作品

有了基本響應式 iframe 概念後,大家可以看看該如何進一步客製網頁上的嵌入內容。

See the Pen Youtube embed poster frame reveal by Craig Morey (@pixelthing) on CodePen.