上次介紹了 position 中 relative 、absolute 幼幼班等級的應用 傳送門
這次我們要結合 iframe 標籤，在網頁中嵌入 Youtube 影片並完成響應式的設計。
iframe 是什麼？
簡單來說就是將外部的網站嵌入到你的網站上，一般常見的有Youtube 、Google Map 等設計，若對 iframe 還不太了解也可以參考 MDN 上介紹及相關屬性設定。
若想在網頁中嵌入影片，Youtube 是一個非常好用的平台
不僅省下了影片的存放空間，影片在各瀏覽器、裝置上的支援度也相當高，
最重要的嵌入代碼也貼心的幫你準備好了，我們只要會複製、貼上就可以了 XD
如何在 Youtube 上取得 iframe 這裡就不多說明，網路上已經有許多詳細的教學可以參考。
<iframe width="560" height="315" src="https://www.youtube.com/embed/yHZEG3P9tiM" frameborder="0" allowfullscreen></iframe>
取得代碼後，用一層 div 包覆 iframe 加上你喜歡的 class 名稱，這邊使用 video-wrapper。
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/yHZEG3P9tiM" frameborder="0" allowfullscreen></iframe>
</div>
CSS 部分
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 概念後，大家可以看看該如何進一步客製網頁上的嵌入內容。
[codepen_embed height=”350″ theme_id=”0″ slug_hash=”zGZKaQ” default_tab=”result” user=”pixelthing”]See the Pen <a href=’https://codepen.io/pixelthing/pen/zGZKaQ/’>Youtube embed poster frame reveal</a> by Craig Morey (<a href=’https://codepen.io/pixelthing’>@pixelthing</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
