Responsive videos made easy
19 Jun 2014Github is definitely a nice place to be around. Following people leads to lucky discoveries.
This morning, Paul Adenot, software engineer at Mozilla, and specialised in audio and video, published a new repo with the content of his talk about rich audio and video on the web.
The talk can be accessed at this address, and it's a short delight.
While I was quickly going through it, I stumbled upon the slide about responsive videos without Javascript - and, of course, it rang a bell.
Basically, CSS media queries now work on the <video>
element.
Without going through the codecs question (addressed earlier in the talk), you can add a media property to your HTML5 videos, like that:
<video controls>
<source src="retina.webm" media="(min-resolution: 300dpi)"></source>
<source src="desktop.webm" media="(min-device-width: 769px)"></source>
<source src="mobile.webm" media="(max-device-width: 769px)"></source>
</video>
Easy, right?
Jump to the slide to see a demo, that is quite impressive.
That is not a revolution - and it's already a 2-year-old solution, but it is progress in terms of usability, simplicity, and weight.
No need for that fancy Javascript looking at your browser properties and running tests: it's all in your browser, right away.
(Provided you use Firefox, for Chrome doesn't integrate this functionality yet.)