Tutorial: Your First Thumbnail Strip

This tutorial walks you through creating thumbnail strips step by step. Each step builds on the previous one, teaching you how to generate visual previews of video content.

Step 1: Basic Thumbnail Strip

Connect a thumbnail strip to a video element to display thumbnails automatically.

What you'll learn: How to connect a thumbnail strip to a video element and display thumbnails automatically.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="tutorial-video-1">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    class="size-full object-contain"
  ></ef-video>
</ef-timegroup>
<div class="mt-4 h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
  <ef-thumbnail-strip target="tutorial-video-1" thumbnail-height="64"></ef-thumbnail-strip>
</div>

Try it yourself: Change thumbnail-height to 32 and notice how the strip height changes.

Step 2: Thumbnail Spacing

Adjust the thumbnail spacing to control how densely thumbnails are packed.

What you'll learn: How thumbnail-spacing-px affects the number of thumbnails displayed and the overall layout.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="tutorial-video-2">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    class="size-full object-contain"
  ></ef-video>
</ef-timegroup>
<div class="mt-4 space-y-2">
  <div class="text-white text-sm">Dense spacing (32px):</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="tutorial-video-2" thumbnail-height="64" thumbnail-spacing-px="32"></ef-thumbnail-strip>
  </div>
  <div class="text-white text-sm mt-2">Wide spacing (96px):</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="tutorial-video-2" thumbnail-height="64" thumbnail-spacing-px="96"></ef-thumbnail-strip>
  </div>
</div>

Try it yourself: Experiment with different thumbnail-spacing-px values (24, 48, 80, 128) to see how the strip adapts.

Step 3: Intrinsic vs Trimmed Duration

Explore how thumbnail strips handle trimmed videos and intrinsic duration modes.

What you'll learn: How use-intrinsic-duration affects thumbnail generation when videos are trimmed.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="tutorial-video-4">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    trimstart="2s"
    trimend="2s"
    class="size-full object-contain"
  ></ef-video>
</ef-timegroup>
<div class="mt-4 space-y-2">
  <div class="text-white text-sm">Trimmed mode (default) — shows trimmed portion only:</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="tutorial-video-4" thumbnail-height="64"></ef-thumbnail-strip>
  </div>
  <div class="text-white text-sm mt-2">Intrinsic mode — shows entire source video:</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="tutorial-video-4" thumbnail-height="64" use-intrinsic-duration></ef-thumbnail-strip>
  </div>
</div>

Try it yourself: Compare the two strips — the first shows thumbnails from the trimmed portion, while the second shows thumbnails from the entire source video.

Step 4: Targeting a Timegroup

Thumbnail strips can target a root ef-timegroup to render composition snapshots including all layers.

What you'll learn: How to use ef-thumbnail-strip with a multi-layer composition.

<ef-timegroup mode="sequence" class="w-[720px] h-[405px] bg-black" id="tutorial-comp">
  <ef-timegroup class="flex items-center justify-center">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="0s" sourceout="2s" class="absolute inset-0 size-full object-contain"></ef-video>
    <h1 class="text-white text-6xl font-bold bg-blue-600 p-6 rounded relative">One</h1>
  </ef-timegroup>
  <ef-timegroup class="flex items-center justify-center">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="5s" sourceout="7s" class="absolute inset-0 size-full object-contain"></ef-video>
    <h1 class="text-white text-6xl font-bold bg-purple-600 p-6 rounded relative">Two</h1>
  </ef-timegroup>
</ef-timegroup>
<div class="mt-4 h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
  <ef-thumbnail-strip target="tutorial-comp" thumbnail-height="64"></ef-thumbnail-strip>
</div>

Step 5: Multiple Strips

Display multiple thumbnail strips for different time ranges of the same video.

What you'll learn: All strips share a global cache, so thumbnails generated for one strip are immediately available to others targeting the same video.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="tutorial-multi">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    class="size-full object-contain"
  ></ef-video>
</ef-timegroup>
<div class="mt-4 space-y-2">
  <div class="text-white text-sm">Full video:</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="tutorial-multi" thumbnail-height="64"></ef-thumbnail-strip>
  </div>
  <div class="text-white text-sm mt-2">Same target — second strip reuses cached thumbnails:</div>
  <div class="h-12 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="tutorial-multi" thumbnail-height="48" thumbnail-spacing-px="96"></ef-thumbnail-strip>
  </div>
</div>

Next Steps

Now that you understand the basics, explore:

Thumbnail Strip reference for complete attribute documentation
Thumbnail Strip concepts for caching architecture, batch extraction, and timeline coordinate details

How-To: Show Thumbnails for a Specific Time Range

Problem: You want to display thumbnails from a specific portion of the video, not the entire duration.

Solution: Use pixels-per-ms to zoom in, or combine the strip with a scrollable container that positions it at the desired offset. For full custom range support, pair the strip with an ef-timeline or control pixels-per-ms and container scroll position.

Timeline behavior:

In trimmed mode (default): time 0 = start of trimmed portion (after trimstart/sourcein)
In intrinsic mode (use-intrinsic-duration): time 0 = start of source media (ignores trimming)

How-To: Choose Between Intrinsic and Trimmed Duration Modes

Use trimmed mode (default) when:

You want thumbnails that match what the user sees in playback
You are building a scrubber for the trimmed timeline

Use intrinsic mode (use-intrinsic-duration) when:

You want to show thumbnails from the entire source video
Users need to see content outside the trimmed portion
You are building a preview interface for the full source

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="howto-intrinsic">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    trimstart="2s"
    trimend="2s"
    class="size-full object-contain"
  ></ef-video>
</ef-timegroup>
<div class="mt-4 space-y-2">
  <div class="text-white text-sm">Trimmed mode (default):</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="howto-intrinsic" thumbnail-height="64"></ef-thumbnail-strip>
  </div>
  <div class="text-white text-sm mt-2">Intrinsic mode:</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="howto-intrinsic" thumbnail-height="64" use-intrinsic-duration></ef-thumbnail-strip>
  </div>
</div>

Note: Custom startTimeMs/endTimeMs (React only) override use-intrinsic-duration and define their own time range.

How-To: Create Responsive Thumbnail Strips

Problem: You need thumbnail strips that work well across different screen sizes and container widths.

Solution: Thumbnail strips automatically calculate the optimal number of thumbnails based on available width. Use CSS to control the container size.

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="howto-responsive">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    class="size-full object-contain"
  ></ef-video>
</ef-timegroup>
<div class="mt-4 space-y-4">
  <div>
    <div class="text-white text-sm mb-1">Full width:</div>
    <div class="w-full h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
      <ef-thumbnail-strip target="howto-responsive" thumbnail-height="64"></ef-thumbnail-strip>
    </div>
  </div>
  <div>
    <div class="text-white text-sm mb-1">Half width:</div>
    <div class="w-1/2 h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
      <ef-thumbnail-strip target="howto-responsive" thumbnail-height="64"></ef-thumbnail-strip>
    </div>
  </div>
</div>

How it works:

The thumbnail strip uses a ResizeObserver to track its container width
It calculates how many thumbnails fit based on spacing: count = floor(width / thumbnailSpacingPx) + 1
Thumbnails are evenly distributed across the time range
When the container resizes, the layout automatically updates

Tips:

Set a fixed thumbnail-spacing-px for consistent thumbnail density
Use CSS width constraints to control the strip width
Strip height is controlled by the container height and thumbnail-height attribute

How-To: Use Multiple Strips for Different Videos

<div class="space-y-6">
  <div>
    <ef-timegroup mode="contain" class="w-[720px] h-[200px] bg-black" id="multi-video-1">
      <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
    </ef-timegroup>
    <div class="mt-2 h-12 rounded border border-gray-600 bg-gray-900 overflow-hidden">
      <ef-thumbnail-strip target="multi-video-1" thumbnail-height="48"></ef-thumbnail-strip>
    </div>
  </div>
  <div>
    <ef-timegroup mode="contain" class="w-[720px] h-[200px] bg-black" id="multi-video-2">
      <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="3s" sourceout="7s" class="size-full object-contain"></ef-video>
    </ef-timegroup>
    <div class="mt-2 h-12 rounded border border-gray-600 bg-gray-900 overflow-hidden">
      <ef-thumbnail-strip target="multi-video-2" thumbnail-height="48"></ef-thumbnail-strip>
    </div>
  </div>
</div>

Performance note: All thumbnail strips share a global cache, so thumbnails generated for one strip are immediately available to others targeting the same video and time ranges.