如何製作 RWD 響應式的影片？

有時客戶會希望在網頁中插入一段 Youtube 影片讓畫面更活潑點，如果是一般的網頁，你只需要直接將 Youtube 的給你的 Code 嵌在網頁裡即可。但如果你正在做 RWD 的網頁，你會發現直接使用 Youtube 給你的 Code 版面會無法隨視窗大小進行縮放，這是因為 Youtube 給你的 Code 使用的單位都是 px 的絕對單位，加上影片有長寬比的問題。常見的有 4:3 及 16:9，使用錯誤的比例會造成變形。如果你將絕對單位改成百分比。比如將影片寬設成 100%，高度設成 auto。這個想法沒有錯，但實作後你會發現影片的高度不會隨寬度自動等比例縮放，造成長、寬比例錯誤而導致影片變形，因此我們需要一點小技巧，讓影片可以配合響應式網頁的縮放需要。

原理說明：

Thierry Koblentz 針對這個問題提出一個解決的方式，首先為影片建立一個 DIV 容器，並把這個容器設定符合影片的長寬比，最後我們只要把 iframe 的影片長寬都設成 100% 撐滿在我們設定的 DIV 容器中即可。

作法：

我們把這個容器命名為 .wrapper，影片的比例我們選擇 16:9，9 除 16 乘 100 等於 56.25，也就是說這個容器的寬度是 100%，高度則取寬度長的 56.25%，css 設定如下：

.wrapper{
    position: relative;
    padding-bottom:56.25%;
    width:100%;
    height:0;
}

這裡有兩點需要注意：

• position 要設成 relative
• height 要設成 0，用 padding-bottom 的方法撐出高度

第二步，將影片撐滿 .wrapper，css 如下：

.wrapper iframe{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

將載入影片的 iframe 設為 absolute，讓它可以對齊 .wrapper 左上角 0, 0 的位置並撐滿整個畫面，完成。