<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";
<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>
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.
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).
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.