← Back to release summary

Media query support for video <source> elements

Category

Multimedia

Type

Chromium catches up

Status

Enabled by default (Chrome 120)

Intent stage

None

• Breaking change: No
• Enterprise impact: None
• Spec maturity: Published standard
• Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-source-media-env-change.html?label=master&label=experimental&aligned

Summary

Adds support for CSS media queries to <source> elements used with <video> elements. Allowing developers to use media query syntax to tell the browser which source should be preferred for a given environment.

Standards & signals

• Specification: https://html.spec.whatwg.org/multipage/media.html#loading-the-media-resource
• Firefox: Shipped/Shipping
• Safari: Shipped/Shipping
• Web developers: Positive — 12 stars on the issue. Developers are passionate enough to implement the feature themselves in Firefox.
• Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1450316

Ecosystem

• Web Platform Tests: https://wpt.fyi/results/?q=html%2Fsemantics%2Fembedded-content%2Fmedia-elements%2Floading-the-media-resource%2Fresource-selection-source-media-env-change
• Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
• GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
• chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Media%20query%20support%20for%20video%20%3Csource%3E%20elements
• MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Media%20query%20support%20for%20video%20%3Csource%3E%20elements
• Baseline status: https://webstatus.dev/?q=Media%20query%20support%20for%20video%20%3Csource%3E%20elements

Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#media

View on chromestatus.com