<media-rendition-menu>

A menu for video renditions (qualities).

Default usage

<media-controller>
  <mux-video
    playsinline crossorigin
    slot="media"
    playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
  ></mux-video>
  <media-rendition-menu hidden anchor="auto"></media-rendition-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-rendition-menu-button></media-rendition-menu-button>
  </media-control-bar>
</media-controller>

Open Sandbox

Explicit linking

<media-controller>
  <mux-video
    playsinline crossorigin
    slot="media"
    playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
  ></mux-video>
  <media-rendition-menu hidden id="menu1" anchor="menu-button1"></media-rendition-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-rendition-menu-button id="menu-button1" invoketarget="menu1"></media-rendition-menu-button>
  </media-control-bar>
</media-controller>

Open Sandbox

Reference

Slots

Name	Description
	Default slotted elements.
`header`	An element shown at the top of the menu.
`checked-indicator`	An icon element indicating a checked menu-item.

Attributes

Name	Type	Description
`disabled`	`boolean`	The Boolean disabled attribute makes the element not mutable or focusable.
`mediacontroller`	`string`	The element `id` of the media controller to connect to (if not nested within).

Media UI Attributes

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.

Name	Type	Description
`mediarenditionselected`	`string`	Set to the selected rendition id.
`mediarenditionlist`	`string`	Set to the rendition list.

CSS Variables

Name	Default	Description
`--media-primary-color`	`rgb(238 238 238)`	Default color of text / icon.
`--media-secondary-color`	`rgb(20 20 30 / .8)`	Default color of background.
`--media-text-color`	`var(--media-primary-color, rgb(238 238 238))`	`color` of text.
`--media-control-background`	`var(--media-secondary-color, rgb(20 20 30 / .8))`	`background` of control.
`--media-menu-display`	`inline-flex`	`display` of menu.
`--media-menu-layout`		Set to `row` for a horizontal menu design.
`--media-menu-flex-direction`	`row`	`flex-direction` of menu.
`--media-menu-gap`	`.25em`	`gap` between menu items.
`--media-menu-background`	`var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8)))`	`background` of menu.
`--media-menu-border-radius`		`border-radius` of menu.
`--media-menu-border`	`none`	`border` of menu.
`--media-menu-transition-in`	`visibility 0s, opacity .2s ease-out, transform .15s ease-out, left .2s ease-in-out, min-width .2s ease-in-out, min-height .2s ease-in-out`	`transition` of menu when showing.
`--media-menu-transition-out`	`visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in`	`transition` of menu when hiding.
`--media-menu-visibility`	`visible`	`visibility` of menu when showing.
`--media-menu-hidden-visibility`	`hidden`	`visibility` of menu when hiding.
`--media-menu-max-height`	`var(--_menu-max-height, 300px)`	`max-height` of menu.
`--media-menu-hidden-max-height`	`var(--media-menu-max-height, var(--_menu-max-height, 300px))`	`max-height` of menu when hiding.
`--media-menu-opacity`	`1`	`opacity` of menu when showing.
`--media-menu-hidden-opacity`	`0`	`opacity` of menu when hiding.
`--media-menu-transform-in`	`translateY(0) scale(1)`	`transform` of menu when showing.
`--media-menu-transform-out`	`translateY(2px) scale(.99)`	`transform` of menu when hiding.
`--media-font`	`var(--media-font-weight, normal) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif)`	`font` shorthand property.
`--media-font-weight`	`normal`	`font-weight` property.
`--media-font-family`	`helvetica neue, segoe ui, roboto, arial, sans-serif`	`font-family` property.
`--media-font-size`	`14px`	`font-size` property.
`--media-text-content-height`	`var(--media-control-height, 24px)`	`line-height` of text.
`--media-icon-color`	`var(--media-primary-color, rgb(238 238 238))`	`fill` color of icon.
`--media-menu-icon-height`	`var(--media-control-height, 24px)`	`height` of icon.
`--media-menu-item-checked-indicator-display`	`none`	`display` of check indicator.
`--media-menu-item-checked-background`	`rgb(255 255 255 / .2)`	`background` of checked menu item.
`--media-menu-item-max-width`		`max-width` of menu item text.