如何製作 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 的位置並撐滿整個畫面,完成。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *