上次介紹了 position 中 relative 、absolute 幼幼班等級的應用 傳送門
這次我們要結合 iframe 標籤,在網頁中嵌入 Youtube 影片並完成響應式的設計。
iframe 是什麼?
簡單來說就是將外部的網站嵌入到你的網站上,一般常見的有Youtube 、Google Map 等設計,若對 iframe 還不太了解也可以參考 MDN 上介紹及相關屬性設定。
若想在網頁中嵌入影片,Youtube 是一個非常好用的平台
不僅省下了影片的存放空間,影片在各瀏覽器、裝置上的支援度也相當高,
最重要的嵌入代碼也貼心的幫你準備好了,我們只要會複製、貼上就可以了 XD
如何在 Youtube 上取得 iframe 這裡就不多說明,網路上已經有許多詳細的教學可以參考。
1 |
<iframe width="560" height="315" src="https://www.youtube.com/embed/yHZEG3P9tiM" frameborder="0" allowfullscreen></iframe> |
取得代碼後,用一層 div 包覆 iframe 加上你喜歡的 class 名稱,這邊使用 video-wrapper。
1 2 3 |
<div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/yHZEG3P9tiM" frameborder="0" allowfullscreen></iframe> </div> |
CSS 部分
1 2 3 4 5 6 7 8 9 10 11 12 |
video-wrapper{ position: relative; padding-bottom: 56.25%; //16:9 overflow: hidden; } video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
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.