Chrome not respecting video source inline media queries

HTML & CSS
1

Hi guys,

Using the below, Chrome is not respecting the media queries to display the correct video source based on the device width. Chrome is just playing the first source it finds as you can see here: http://homeglobal.ch/. Any ideas what is wrong?

	<video id="intro-video" poster="img/poster.png" controls>
		<source src="videos/intro.mp4" type="video/mp4" media="all and (min-device-width:1600px)">
		<source src="videos/intro.webm" type="video/webm" media="all and (min-device-width:1600px)">
		<source src="videos/intro-1600.mp4" type="video/mp4" media="all and (min-device-width:1100px)">
		<source src="videos/intro-1600.webm" type="video/webm" media="all and (min-device-width:1100px)">
		<source src="videos/intro-1100.mp4" type="video/mp4" media="all and (min-device-width:481px)">
		<source src="videos/intro-1100.webm" type="video/webm" media="all and (min-device-width:481px)">
		<source src="videos/intro-480.mp4" type="video/mp4">
		<source src="videos/intro-480.webm" type="video/webm">
	</video>

Many thanks

2

Er, I may be completely mistaken, but I’ve never seen the media attribute used in that way. I thought it was just for CSS links.

3

Yes it’s not just for CSS actually. See here: http://demosthenes.info/blog/820/Make-HTML5-Video-Adaptive-With-Inline-Media-Queries I’m just wondering why my implementation is not working correctly.

4

Ah, great link. Thanks for setting me straight. There are some errors in your code that could be causing the issue—some strange byte characters that don’t show up except in the Chrome inspector (as red dots). Try removing the white space from between each <source> element (as a test) and see if that fixes it.

5

I see these errors in the HTML5 validator, removing the white space doesn’t seem to solve them. Any other ideas? It’s very bizarre. Thank you for your help so far.

6

Just remove the whitespace anyway, for testing purposes. Perhaps even retype the tags for good measure, and check your editor settings (turn off anything to do with BOM, for example).

7

Ok so I’ve managed to get rid of those encoding issues, but i’m still left with the main issue that Chrome is ignoring these media queries. The other browsers are respecting them. Any other ideas? Chrome is supposed to support media queries for source elements.

Thanks again