Responsive Video Source Selection

Problem

The HTML <source media="..."> attribute inside <video> elements does NOT work reliably across browsers for responsive video selection. Chrome/Blink and Firefox ignore the media attribute entirely, always selecting the first <source> that matches by type. Only Safari/WebKit respects it.

This means code like this only works in Safari:

<!-- BROKEN in Chrome & Firefox -->
<video controls>
  <source src="portrait.mp4" type="video/mp4" media="(max-width: 639px)" />
  <source src="landscape.mp4" type="video/mp4" />
</video>