<media-captions-menu>

A menu for subtitles and captions.

Default usage

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

Open Sandbox

Explicit linking

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

Open Sandbox

Alternate button content

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>

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.
`captions-indicator`	An icon element indicating an item with closed captions.

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

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.