在網頁上崁入YouTube iframe視頻時遇到了一個小問題，我需要在YouTube視頻大小取決於100%自動縮放，好使得我的網頁RWD設計能完整呈現。但是當我加入了嵌入代碼，視頻有一個固定的高度和寬度，你可能會認為設定CSS iframe width:100％寬度，視頻就會依照這樣設定，自動向周圍的容器調整，這好了！事實並非如此，寬度是可以100%自動縮放，但是高度就是沒辦法自動100%縮放。
如何Youtube解決崁入iframe embed RWD
整個解決方案其實很簡單，首先你需要一個<div>包覆在你的影片視頻標籤外，主要影片標籤崁入iframe沒有100%對應的高度，所以我們需要使用外面包覆的<div>給予他自適應的高度，這時候我們可以調配包覆在外的<div> padding-bottom:56.25%，然而這個數字怎麼來的，因為影片高度與寬度的比例16:9來計算得到，9/16=0.5625換算出它的高度比0.5625=56.25%。這樣包覆在外的<div>為相對relative，影片標籤iframe為絕對absolute，高度在設定100%，就會依照外面包覆的相對relative<div>高度去自適應。
.video-container的padding-top:30px，Youtube播放列會顯示出來，若沒有設定則會自動隱藏方式出現。(所以pading-top:30px 可設定可不設定)
此方法同樣適用於相關崁入式標籤，如Vimeo、Google Map，唯獨在需要特定比例高度，時需要特別換算高度比。
以下CSS程式碼添加到您的樣式表
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%;
}HTML
<div class="video-container">
<iframe frameborder="0" height="315" src="http://www.youtube.com/embed/dFVxGRekRSg" width="560"></iframe>
</div>YouTube的RWD實例
延伸閱讀：
Making Embedded Content Work In Responsive Design
Creating Intrinsic Ratios for Video