Interactive Sandbox
Experiment with different thumbnail strip settings to see how they affect the appearance and behavior. Adjust the dimensions, thumbnail width, time ranges, and video trimming to understand how each property works.
Video Editor Interface
This example shows how to use thumbnail strips in a professional video editor interface with zoom and scrolling capabilities.
Video Editor Interface
Timeline
Editor Usage Tips
- • Zoom In: See frame-by-frame detail for precise editing
- • Zoom Out: Get overview of entire video timeline
- • Scroll: Navigate through long videos efficiently
- • Thumbnail Width: Controls both detail level and total strip width
Attributes
target
targettargetstringThe ID of the video element to generate thumbnails from. Do not include the # character.
The thumbnail strip will automatically track the target video element and update thumbnails when the video's properties change.
💡 Specify the element ID without the # prefix (e.g., "my-video" to target a video with id="my-video").
thumbnailWidth
thumbnail-widththumbnailWidthnumber80The desired width of individual thumbnails in pixels.
The thumbnail strip automatically calculates how many thumbnails to display based on the available width and this thumbnail width. Larger values result in fewer, more detailed thumbnails.
Height is automatically calculated to maintain the video's aspect ratio within the strip's height.
startTimeMs
start-time-msstartTimeMsnumberCustom start time in milliseconds for thumbnail generation.
When specified, overrides the natural start time of the video (including any trimming) to generate thumbnails from this absolute time in the source media.
This is useful for showing thumbnails from a specific portion of the video regardless of how it's trimmed or positioned in the timeline.
endTimeMs
end-time-msendTimeMsnumberCustom end time in milliseconds for thumbnail generation.
When specified, overrides the natural end time of the video (including any trimming) to generate thumbnails up to this absolute time in the source media.
Must be used in conjunction with startTimeMs to define a custom time range.
useIntrinsicDuration
use-intrinsic-durationuseIntrinsicDurationbooleanfalseUse the full source media duration instead of the trimmed duration for thumbnail generation.
When true, thumbnails are generated from the entire source video file, ignoring any trimStart, trimEnd, sourceIn, or sourceOut properties on the target video element.
⚠️ This property is ignored if custom startTimeMs or endTimeMs values are provided.
Performance
The thumbnail strip includes several performance optimizations:
- Intelligent Caching: Thumbnails are cached globally across all strip instances
- Batch Processing: Thumbnails are generated efficiently in batches
- Responsive Layout: Automatically adjusts thumbnail count based on available width
- Aspect Ratio Preservation: Thumbnails maintain proper aspect ratios without distortion