純 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 影片就是用這個方法達成的。
