Vimeo Video Field App

This Agility CMS app provides a powerful Vimeo video field that allows content editors to easily embed and manage Vimeo videos in their content.

Key Features

  • •URL Input & Validation: Simply paste any Vimeo video URL and the app automatically validates and extracts video information
  • •Automatic Metadata Fetching: Uses Vimeo's oEmbed API to retrieve video title, description, thumbnail, duration, and author details
  • •Live Video Preview: Embedded Vimeo player using the official Vimeo Player SDK for seamless video playback
  • •Responsive Design: Side-by-side layout on desktop (≥600px) and stacked layout on mobile devices
  • •Complete Data Storage: Saves full video metadata as JSON for use in templates and API responses

How It Works

  1. Content editors paste a Vimeo video URL into the field
  2. The app validates the URL and extracts the video ID
  3. Video metadata is fetched from Vimeo's public oEmbed API
  4. A live preview appears with the embedded Vimeo player
  5. Video details are displayed alongside the player
  6. All data is stored as structured JSON in the field value

Supported Video Types

  • ✓Public Vimeo videos
  • ✓Unlisted videos (with proper URL parameters)
  • ✓Various Vimeo URL formats (vimeo.com, player.vimeo.com)

Built with the Agility App SDK v2, this app demonstrates modern field component development with React, TypeScript, and Tailwind CSS. View the app definition here.