使嵌入的內容工作在響應式設計：Responsive YouTube Vimeo Google Map Embed

在網頁上崁入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