Chapter 346: <Thumbnail>

Core Idea

<AvailableFrom v="3. 2.

Key Concepts

• API
• component or lazyComponent
• frameToDisplay
• compositionWidth
• compositionHeight
• durationInFrames
• fps
• errorFallback?

Code Examples

// @allowUmdGlobalAccess
// @filename: ./remotion/MyVideo.tsx
export const MyVideo: React.FC<{title: string}> = ({title}) => <>{title}</>;

// @filename: index.tsx

export const App: React.FC = () => {
  return (
    <Thumbnail
      component={MyVideo}
      compositionWidth={600}
      compositionHeight={600}
      frameToDisplay={30}
      durationInFrames={120}
      fps={30}
      inputProps={{
        title: 'Foo',
      }}
    />
  );
};

• What it demonstrates: Usage pattern for <Thumbnail> from the official docs.

Key Takeaways

1. Understand api when working with <Thumbnail>.
2. Understand component or lazycomponent when working with <Thumbnail>.
3. Understand frametodisplay when working with <Thumbnail>.
4. Understand compositionwidth when working with <Thumbnail>.
5. Understand compositionheight when working with <Thumbnail>.

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.