<media-captions-menu>

A menu for subtitles and captions.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>
  <media-captions-menu hidden anchor="auto"></media-captions-menu>
  <media-captions-menu-button></media-captions-menu-button>
</media-controller>
<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>
  <media-captions-menu hidden id="menu1" anchor="menu-button1"></media-captions-menu>
  <media-captions-menu-button id="menu-button1" invoketarget="menu1"></media-captions-menu-button>
</media-controller>

For alternative content for the button, there are the on and off slots.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>
  <media-captions-menu hidden anchor="auto"></media-captions-menu>
  <media-captions-menu-button>
    <span slot="on"><b><u>CC</u></b></span>
    <span slot="off">CC</span>
  </media-captions-menu-button>
</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.
captions-indicator An icon element indicating an item with closed captions.
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).

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
mediasubtitleslist string A list of all subtitles and captions.
mediasubtitlesshowing boolean A list of the showing subtitles and captions.
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.