Vimeo Component

The Vimeo component provides a performant, accessible way to embed Vimeo videos in your application. It features lazy loading, custom thumbnails, and structured data support for better SEO.

Key Features

• Performance-First: Loads video player only on interaction

• SEO-Friendly: Includes structured data and semantic markup

• Customizable: Supports custom thumbnails and player parameters

Basic Usage

The Mountain

A video by TSO Photography

1
<Vimeo src="22439234" title="The Mountain" description="A video by TSO Photography" />

Features

Video ID Support

The component accepts both full Vimeo URLs and video IDs:

1
<!-- Using Video ID -->
2
<Vimeo src="22439234" />
3

4
<!-- Using Full URL -->
5

6
<Vimeo src="https://vimeo.com/22439234" />

Custom Thumbnails

Override the default Vimeo thumbnail with your own image:

PreviewCode

1
  <Vimeo
2
    src="9479342"
3
    thumbnailProps={{
4
      src: customThumbnail,
5
      alt: 'Custom thumbnail description',
6
    }}
7
  />

Player Parameters

Customize the Vimeo player behavior with URL parameters:

1
<Vimeo
2
    src="22439234"
3
    params="color=ff0000&background=1"
4
/>

Vimeo Component Props API

Structured Data SEO Optimization

The component automatically generates VideoObject structured data:

1
<Vimeo
2
    src="22439234"
3
    title="Video Title"
4
    description="Video description"
5
    uploadDate={new Date('2024-02-24')}
6
    structuredData={true}
7
/>

Functions

The component exposes the following function for you to use:

1
play(): Promise<void>;