HTMLSourceElement: sizes property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2017⁩.

The sizes property of the HTMLSourceElement interface is a string representing a list of one or more sizes, representing sizes between breakpoints, to which the resource applies.

It reflects the sizes attribute of the <source> element.

Value

A string.

Examples

html

<source
  id="el"
  src="mediumVideo.mov"
  type="video/quicktime"
  sizes="(50em <= width <= 60px) 50em,
         (30em <= width < 50em) 30em" />

const el = document.getElementById("el");
console.log(el.sizes); // Output: "(50em <= width <= 60px) 50em, (30em <= width < 50em) 30em"
el.sizes = "(50em <= width <= 60px) 100em, (30em <= width < 50em) 60em"; // Updates the sizes value