vimeo-video

Of the embed-backed media components, the Vimeo player SDK 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. 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.

Import

pnpm add @videojs/vimeo-video

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

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.4/media/vimeo-video.js"></script>

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.

<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

<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';

{ title?: string | null; poster?: string | null; storyboard?: string | null; readonly [key: string]: MediaContentValue }

{ length: number; start(index: number): number; end(index: number): number }

{ src?: string; engine?: VimeoSourceEngineConfig } | null

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