<media-context-menu>

A customizable context menu for video elements. This component allows you to provide your own menu items for video playback. Common use cases include “Copy video URL”, attribution links, or other media-related actions accessible via right-click on the video element.

Remember to add the separate menu module for the menu components.

import "media-chrome";
import "media-chrome/menu";

Default usage

Section titled Default usage
<media-controller>
  <mux-video
    playsinline crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></mux-video>
  <media-context-menu>
    <media-context-menu-item>
      <a href="https://mux.com" target="_blank">Powered by Mux</a>
    </media-context-menu-item>
    <media-context-menu-item>
      <button invoke="copy">Copy Video URL</button>
      <input slot="copy" type="hidden" value="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4">
    </media-context-menu-item>
  </media-context-menu>
  <media-control-bar>
    <media-play-button></media-play-button>
  </media-control-bar>
</media-controller>
Open on CodeSandboxOpen Sandbox
Section titled Menu Items

Menu items are added as <media-context-menu-item> elements inside <media-context-menu>. Each item can include links, buttons, or custom elements.

  <media-context-menu>
    <media-context-menu-item>
      <a href="https://mux.com" target="_blank">Powered by Mux</a>
    </media-context-menu-item>
    <media-context-menu-item>
      <button invoke="copy">Copy Video URL</button>
      <input slot="copy" type="hidden" value="https://stream.mux.com/your-video-url.mp4">
    </media-context-menu-item>
  </media-context-menu>

Using the Copy Function

Section titled Using the Copy Function

The invoke="copy" attribute on a button triggers copying of the value from an input element with slot="copy" inside the same menu item.

To use it:

  1. Add a <button invoke="copy"> inside a <media-context-menu-item>.
  2. Add an <input slot="copy" type="hidden" value="..."> containing the text or URL to copy.
  3. When the button is clicked, the input’s value is copied to the clipboard automatically.
<media-context-menu-item>
  <button invoke="copy">Copy Video URL</button>
  <input slot="copy" type="hidden" value="https://stream.mux.com/example.mp4">
</media-context-menu-item>