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

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

如何製作 RWD 響應式的影片? 閱讀全文 »