純 CSS 打造自適應影片播放器

自適應網頁設計已經普及於各個網站上，當網頁需要嵌入影片時，也需要能隨著使用者瀏覽的解析度、寬度不同而有所變化。

因此，打造自適應影片播放器的需求如雨後春筍般冒出，這篇文將介紹我目前最常用的：以純 CSS 來達成自適應影片播放器。

相較於 JavaScript，CSS 在瀏覽器上有比較卓越的效能，所以我偏好能用 CSS 解決就不使用 JavaScript。不過純 CSS 版本的彈性不比 JavaScript。當影片長寬比不相同時，CSS 都要額外補寫新的。

HTML 的結構是：

<div class=”video-container video-ratio-16by9″>
  <iframe></iframe>
</div>

HTML 原理是以外包一個容器（Container），先用容器透過 CSS 劃出空間後再將裡面的影片（因為原理相同，所以 iframe 或 video 都適用）以 CSS 填滿整個空間達到自適應的效果。

CSS 原理很簡單，利用 padding 的百分比來自動計算長寬比。向下留白（padding-bottom）以百分比的方式定義會使瀏覽器以該 node 的寬作為基準，依照指定的比例算出高度。

以一個 16:9 的影片來說，9 除以 16 等於 0.5625，也就是 56.25%。所以將 padding-bottom 設定為 56.25% 就能畫出一個 16:9 的容器。4:3 的同理。

綜合以上，可以寫出以下 CSS：

.video-container {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  box-sizing: border-box
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%
}

.video-ratio-16by9 {
  padding-bottom: 56.25% /* 9:16 */
}

.video-ratio-4by3 {
  padding-bottom: 75% /* 3:4 */
}

最後，想要看實際的效果可以到「如何讓 YouTube c.c. 字幕與眾不同」這裡，文章中最上面的 YouTube 影片就是用這個方法達成的。