谷歌 Web 開發最佳實踐手冊（2.2.4）：正確調整視訊大小

【伯樂線上提示】：① 5月6日，谷歌開發者中心推出了一個 Web 開發最佳實踐手冊。伯樂線上資源頻道摘編該資源後，已邀請一些關注 Web 開發的朋友參與翻譯手冊。② 由於譯者朋友幾乎都是已在職，都是在工作之餘參與，每位的翻譯進度會不一樣（請理解），所以手冊中文版不會按照英文版章節順序釋出。③ 手冊中文版尚不完整，請不要轉載，謝謝合作。

---

【導讀】：當關繫到保持使用者愉悅度時，視訊大小就顯得尤為重要了。

 

在本課程的內容有：

1. 檢測視訊的大小
2. 保證視訊不會溢位容器

當關繫到保持使用者愉悅度時，視訊大小就顯得尤為重要了。

• 使用大尺寸和高質量視訊時注意不要超出平臺的承受範圍。
• 視訊應儘可能的短。
• 過長的視訊可能會引起下載和載入的中斷；有的瀏覽器會等待視訊下載完才開始播放。

 

檢測視訊的大小

視訊真正的編碼幀大小有可能與視訊元素的大小不一樣（就像圖片不一定按照它本身的大小顯示）。
要檢測視訊編碼的大小，可以用視訊元素的 videoWidth 和 videoHeight 屬性。而 width 和 height 則返回視訊元素的大小，這兩個值可能已被 CSS 或內聯 width 和 height 屬性修改了。

 

保證視訊不會溢位容器

當視訊元素大小超過視窗時就有可能會溢位容器，此時使用者將無法看到完整的內容或使用上面的控制元件。

  

你可以通過 JavaScript 或 CSS 控制視訊大小。像 FitVids 之類的 JavaScript 庫或外掛可以方便地保持適當的大小和寬高比，甚至可以用在 YouTube 和其它源的 Flash 視訊上。

使用 CSS 媒體查詢 (CSS media queries)去指定元素的大小隨視窗尺寸變化而變化。
max-width: 100% 會是你的好朋友。

記住：不要強行改變視訊的寬高比。壓扁或者拉伸都會很難看。

對於 iframes 中的媒體內容（像 YouTube 視訊），可以採用響應式的方法（比如這個由 John Surdakowski 提出的）。

CSS：

檢視完整樣例

HTML：

檢視完整樣例

對比響應式樣例和非響應式樣例。