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

Save on your hotel - www.hotelscombined.com

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

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

 

iframe 是什麼？

 

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

 

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

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

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

 

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

 

XHTML
1
<iframe width="560" height="315" src="https://www.youtube.com/embed/yHZEG3P9tiM" frameborder="0" allowfullscreen></iframe>

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

 

XHTML
1
2
3
<div class="video-wrapper">
    <iframe src="https://www.youtube.com/embed/yHZEG3P9tiM" frameborder="0" allowfullscreen></iframe>
</div>

 

CSS 部分

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.