Buttons

Caption Button

This component is used to toggle the visibility of the current captions text track.

# Usage

The <media-caption-button> component will toggle the mode of the current captions text track when pressed by dispatching a media-text-track-change-request event to the player. The mode will toggle between showing and disabled.

          
1
2
3
4
		    

# Key Shortcuts

Keyboard shortcuts can be specified either through the global key shortcuts config, or on the component like so:

👉 See the aria-keyshortcuts docs for more information.

# Custom Icons

Here's an example containing a custom enter and exit icon:

# Tooltips

Tooltips can be provided like so:

          
1
2
3
4
5
6
		    

# Styling

You can override the default styles with CSS like so:

        media-caption-button {
  color: pink;
  transition: opacity 0.2s ease-in;
}

/* Apply styles when captions is on. */
media-caption-button[data-pressed] {
}

/* Apply styles when captions is _not_ on. */
media-caption-button:not([data-pressed]) {
}

/* Apply styles when captions is not supported. */
media-caption-button[aria-hidden='true'] {
}

/* Style default icons. */
media-caption-button svg[slot='on'] {
}
media-caption-button svg[slot='off'] {
}

      

# Focus

        media-caption-button {
  /* box shadow */
  --media-focus-ring: 0 0 0 4px rgb(78 156 246);
}

/* Apply styles when focused via keyboard. */
media-caption-button[data-focus] {
}

      

# CSS Variables

See the toggle button CSS variables for simple customization of the default button and tooltip styles.

# Tailwind

The following is a headless example using Tailwind:

# Tooltips

The following extends the example above with tooltips:

# Component API