I want media query support in video
source
elements
Submitted by Alastair Coote
Permalink https://webwewant.fyi/wants/8/
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.
- This was presented at
- View Source
–
Amsterdam, Netherlands - An Event Apart
–
Washington DC, USA
- View Source