TIL: Media queries of "source" elements can be used only within "picture" elements

TL;DR: You can set the media attribute of a <source> element only within <picture> elements. So you can’t switch a <video> source based on the preferred color scheme for dark/light mode support.

A neat use case of the media attribute on a <source> element is to toggle images based on the preferred colors scheme.

<picture> <source srcset="dark.png" media="(prefers-color-scheme: dark)" /> <img src="light.png" /> </picture> 

A nice plus of this approach is that there won’t be any waste of bandwidth: the browser will download only the image associated with the current theme.

Unfortunately, you can’t use the media attribute on <video> sources — it would get ignored in most major browsers.

<!-- Won't work --> <video> <source src="dark.mp4" type="video/mp4" media="(prefers-color-scheme: dark)" /> <source src="light.mp4" type="video/mp4" /> </video> 

So you’ll still need to do it with some CSS (or JS).

<video class="dark" src="dark.mp4" /> <video class="light" src="light.mp4" /> <style> .light { display: block; } .dark { display: none; } @media (prefers-color-scheme: dark) { .light { display: none; } .dark { display: block; } } </style>