Scalable Videos & Audio in Responsive websites

How to display a video in a webpage that resizes properly in browsers on desktop computers and mobile devices.

Search for solutions and you'll find different ways to do that.

Since all appear to have a letterbox either above and below or left and right of the video and since all experts are parroting each other, I searched further and found a better solution.

➠ Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width

Code :

➠ http://jsbin.com/ebusok/135/edit

The result is the video below and the ones on the other pages.

And with a little help of ➠ some styling, it is also nice to look at.

Different coding solutions to scale

Follow the link and make the comparison yourself (including lots of sample code) :

➠ Differences

Mobile device users : To fully enjoy the videos, hold your device horizontal.

Convert movies

Use ➠ Miro Video Converter to convert movies to MP4, WebM and Ogg.

⇪ Feb 17 2021 19:40:56