YouTube Video Field App

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

Key Features

  • •URL Input & Validation: Simply paste any YouTube video URL and the app automatically validates and extracts video information
  • •Automatic Metadata Fetching: Uses YouTube's oEmbed API to retrieve video title, thumbnail, author details, and video dimensions
  • •Live Video Preview: Embedded YouTube player using YouTube's standard iframe embed 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 YouTube video URL into the field
  2. The app validates the URL and extracts the video ID
  3. Video metadata is fetched from YouTube's public oEmbed API
  4. A live preview appears with the embedded YouTube 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 YouTube videos
  • ✓Unlisted YouTube videos (with proper URL)
  • ✓Various YouTube URL formats (youtube.com, youtu.be, m.youtube.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.