Thursday, January 6, 2022

如何讓 html5 video tag 可以 responsive ,即隨頁面大小產生變化

寫法:
at html
<video class="video-js"> ... </video>

at css
.video-js {
width: 100%;
height: auto;
}

解釋
To make the container responsive, the trick is to explain to the browser how both axis should behave according to their environment (the container). Here I have chosen the horizontal axis to respond to the container width and the vertical axis to automatically resize according to that and the aspect ratio (which is what we normally want). Setting both to fixed (hard-coded width and height) or fluid values (auto) would not work: the first would respect your settings at all costs and the latter the video size or a default browser value, but both would ignore the context where the element is placed.