VimeoVideo

Video component that plays Vimeo videos and live events through the Vimeo player SDK. Vimeo’s own chrome stays hidden by default, so it drops into a player skin like any other media component; set controls to use Vimeo’s UI instead.

Of the embed-backed media components, this one comes closest to a native <video>: volume, mute, playback rate, seeking, looping, and picture-in-picture all work, and the embed pushes real events instead of being polled.

Load a source

src takes a numeric video id or a Vimeo URL. Watch (vimeo.com/<id>), embed (player.vimeo.com/video/<id>), and event (vimeo.com/event/<id>) URLs all work.

<VimeoVideo src="https://vimeo.com/76979871" />

<vimeo-video src="https://vimeo.com/76979871"></vimeo-video>

Collection URLs aren’t supported: channels, showcases, albums, groups, on-demand pages, and user-scoped paths carry no id the player can load. Link to a specific video instead. #t= fragments are ignored as well; use engine.vimeo.start_time to start partway in.

Unlisted videos

An unlisted video needs the hash Vimeo issues alongside its id. Pass it the way Vimeo writes it, either as a trailing path segment or as an h parameter:

https://vimeo.com/76979871/abc123def
https://vimeo.com/76979871?h=abc123def

Both reach the embed as its h parameter. When a URL carries the hash in both places, the h parameter wins.

Live events

A vimeo.com/event/<id> URL plays that event through Vimeo’s event embed, and its unlisted hash becomes a path segment rather than a parameter. The media reports no stream type or live window, so a player skin renders it with the same controls as an on-demand video rather than a live UI.

Behavior

• Fullscreen goes through the Vimeo player, so Vimeo’s own fullscreen chrome appears and the player reports the state back.
• Captions round-trip by name only: the embed’s track list appears in textTracks and selecting one enables it, but no cues cross over. Vimeo draws captions inside the iframe.
• poster has no effect. The embed shows its own thumbnail, which engine.vimeo.thumbnail_id picks.
• playbackRate is limited to Vimeo’s supported range, 0.5 through 2.
• playsInline and preload are read when the embed URL is built, so changing them later doesn’t take effect.
• The video’s Vimeo title arrives as content data, so a player skin can show it without fetching anything yourself.

Examples

Basic Usage

import { VimeoVideo } from '@videojs/react/media/vimeo-video';

export default function BasicUsage() {
  return (
    <div className="vimeo-video">
      <VimeoVideo src="https://vimeo.com/76979871" controls />
    </div>
  );
}

.vimeo-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

<vimeo-video
    class="vimeo-video"
    src="https://vimeo.com/76979871"
    controls
></vimeo-video>

.vimeo-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

import '@videojs/html/media/vimeo-video';

<VimeoVideo
  source={{
    src: 'https://vimeo.com/76979871',
    engine: { vimeo: { color: 'f03e3e', start_time: 30, speed: true } },
  }}
/>

const video = document.querySelector('vimeo-video');
video.source = {
  src: 'https://vimeo.com/76979871',
  engine: { vimeo: { color: 'f03e3e', start_time: 30, speed: true } },
};