內嵌youtube影片或其他供應影音串流的平台最常遇到的就是iframe不知道寬高要設定為多少，尤其遇到響應式的狀況更是頭痛，今天搜尋了一下找到有個簡單的CSS解法，在這裡分享給大家。
HTML代碼
< div class="video-container">< iframe.......></iframe></div>
裡面的iframe就是我們用來內嵌的影音iframe, 我們在外面用個div把它包起來
CSS
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
這時候我們針對外面包的div做一些技巧性的css樣式，以比例方式來將我們的外框給擴展到我們要的尺寸，然後裡面的iframe則是隨著這個外框作相對的尺寸變換，效果還蠻好的大家可以參考一下
以上的樣式套起來就像下面的效果, 大家可以嘗試一下縮放視窗就可以看到效果了
來源網站:
coolestguidesontheplanet.com 
