<media-preview-thumbnail>

The preview thumbnail shows an image while the user hovers over the time range. There is no need to add this element yourself, it’s automatically included by <media-time-range>.

Default (no src)

<media-preview-thumbnail></media-preview-thumbnail>

With thumbnail and coords

<media-preview-thumbnail
  mediapreviewimage="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/storyboard.jpg"
  mediapreviewcoords="284 640 284 160"
></media-preview-thumbnail>

Reference

Section titled Reference

Attributes

Section titled Attributes
Name Type Description
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

Media UI Attributes

Section titled 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
mediapreviewimage string Set to the timeline preview image URL.
mediapreviewcoords string Set to the active preview image coordinates.

CSS Variables

Section titled CSS Variables
Name Default Description
--media-preview-thumbnail-display inline-block display property of display.
--media-control-display inline-block display property of control.