javascripthtmlnode.jsvimeo

How do I get a Vimeo video thumbnail from the Vimeo API?

If I have a Vimeo video URL, is there any way to get the associated thumbnail from the Vimeo API? Like in Youtube, I use "https://img.youtube.com/vi//default.jpg"

I tried to find a way to get a thumbnail from the Vimeo API but couldn't find it anywhere or do it at all.

Solution

  • If the video URL is https://vimeo.com/<video-id> then the thumbnail URL should be available at https://vumbnail.com/<video-id>.jpg

    (Note that this third-party service generates Vimeo thumbnails based on the video ID, but it may not work for private or restricted videos.)

    For example, take this video: https://vimeo.com/137925379:

    Vimeo Video Example

    Then, the thumbnail URL would be https://vumbnail.com/137925379.jpg:

    Video Thumbnail Example

    Here is some JS Code that can create this URL from a provided Vimeo video URL:

    /**
 * Regular expression to match Vimeo video URLs.
 * @const {RegExp}
 */
const VIMEO_REGEX = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;

/**
 * Base URL format for Vimeo thumbnails.
 * @const {string}
 */
const VIMEO_THUMBNAIL_BASE_URL = 'https://vumbnail.com';

/**
 * Extracts the Vimeo video ID from a given Vimeo URL and returns the thumbnail URL.
 * Supports URLs in the form of 'https://vimeo.com/{video_id}' or 'vimeo.com/{video_id}'.
 *
 * @param {string} vimeoUrl - The Vimeo video URL.
 * @return {string|null} The thumbnail URL or null if the Vimeo video ID could not be extracted.
 * @throws {Error} If the provided URL is not a valid Vimeo URL.
 * @example
 * // Returns 'https://vumbnail.com/137925379.jpg'
 * getVimeoThumbnail('https://vimeo.com/137925379');
 * 
 * @example
 * // Returns 'https://vumbnail.com/137925379.jpg'
 * getVimeoThumbnail('vimeo.com/137925379');
 */
function getVimeoThumbnail(vimeoUrl) {
  if (typeof vimeoUrl !== 'string') {
    throw new Error('Input must be a string.');
  }
  const match = vimeoUrl.match(VIMEO_REGEX);
  if (match && match[1]) {
    const videoId = match[1];
    return `${VIMEO_THUMBNAIL_BASE_URL}/${videoId}.jpg`;
  }
  return null;
}

// Example usage:
const thumbnailUrl = getVimeoThumbnail('https://vimeo.com/137925379');
console.log(thumbnailUrl);
    .as-console-wrapper { max-height: 100% !important; top: 0; }