This component is automatically rendered internally by <media-time-range>. While the default implementation covers most use cases, the documentation below describes how the component works for applications with advanced use cases.

The <media-preview-thumbnail> component displays an image while the user hovers over the media time range.

Default (no src)


With thumbnail and coords

  mediapreviewcoords="284 640 284 160"
Name Type Description
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

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.
Name Default Description
--media-preview-thumbnail-display inline-block display property of display.
--media-control-display inline-block display property of control.