I want media query support in video source elements

The picture element lets you provide different images to the user based on a media query attached to a source element. It's a great way to save user bandwidth when your image differs at different viewports (for example, serving a wide image on desktop and a square one on mobile). However, attaching a media query to a video source does not do the same thing, it just plays whichever source is specified first. We are using muted, autoplay videos more and more and right now we have to render an empty div tag then fill with a video via JavaScript after page load.

Here’s an example published from the New York Times and another on Glitch.

It would be amazing to not have to script this at all and just let the video element work it out for us.