如何製作響應式的影片

很多時候我們需要在網頁中插入一段 Youtube 影片,如果你直接複製 Youtube 中的鑲入則會發生一個問題,那就是 Youtube 提供的 HTML 會是一個佔據固定範圍的影片,無法配合手機或平板彈性縮放!其實不只是 Youtube 會發生這樣的問題,只要是影片要鑲入到網頁中,都會發生類似的問題;如果我們把影片寬設成 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 的位置並撐滿整個畫面

完成 🙂

下面是一個完整的例子:

延伸閱讀:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料