<media-settings-menu>

A menu for nested submenu items. This is used for settings like quality, speed, and captions.

Remember to add the seperate menu module for the menu components.

import "media-chrome";
import "media-chrome/menu";

Default usage

<media-controller>
  <mux-video
    playsinline crossorigin
    slot="media"
    playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
    poster="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13"
  ></mux-video>
  <media-settings-menu hidden anchor="auto">
    <media-settings-menu-item>
      Speed
      <media-playback-rate-menu slot="submenu" hidden>
        <div slot="title">Speed</div>
      </media-playback-rate-menu>
    </media-settings-menu-item>
    <media-settings-menu-item>
      Quality
      <media-rendition-menu slot="submenu" hidden>
        <div slot="title">Quality</div>
      </media-rendition-menu>
    </media-settings-menu-item>
    <media-settings-menu-item>
      Captions
      <media-captions-menu slot="submenu" hidden>
        <div slot="title">Captions</div>
      </media-captions-menu>
    </media-settings-menu-item>
  </media-settings-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-time-range></media-time-range>
    <media-settings-menu-button></media-settings-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).

CSS Variables

Name	Default	Description
`--media-settings-menu-justify-content`		`justify-content` of the menu.
`--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.