• Home
  • 數位學習
  • CSS
  • 使嵌入的內容工作在響應式設計:Responsive YouTube Vimeo Google Map Embed

使嵌入的內容工作在響應式設計: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 src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

YouTube的RWD實例

延伸閱讀:

Making Embedded Content Work In Responsive Design

Creating Intrinsic Ratios for Video

Posted in CSS

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses