<media-settings-menu>

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

Default usage

Section titled 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 on CodeSandboxOpen Sandbox

Reference

Section titled Reference

Attributes

Section titled 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

Section titled 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.