<media-loop-button>

The <media-loop-button> component toggles media looping on and off. When active, the media will automatically restart after finishing playback. This component is especially made for being included inside a <media-context-menu> and <media-context-menu-item> as a playback option.

The <media-loop-button> is commonly used as part of a <media-context-menu> to allow users to toggle looping playback within an options panel.

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>

  <media-context-menu>
    <media-context-menu-item>
      <media-loop-button></media-loop-button>
    </media-context-menu-item>
  </media-context-menu>
</media-controller>

When used in this way, selecting the button from the menu dispatches a media-loop-request event, toggling the looping behavior of the current media element.

The <media-loop-button> updates automatically with Media UI Attributes, reflecting the current looping state of the media.

You can use these attributes to style the button. For example, to visually highlight when looping is enabled:

media-loop-button[medialoop] {
  color: var(--media-button-active-color, #1e90ff);
}

media-loop-button:not([medialoop]) {
  opacity: 0.6;
}