Learn more about our ✨ new ✨ native MCP
Directus Logo
  • Use Cases and Features
    • Headless CMS
      Manage and deliver content with ease
    • Backend-as-a-Service
      Build and ship applications faster
    • Headless Commerce
      A single source of truth for products
    • 100+ More Use Cases
      Build anything (or everything)
    • Instant APIs
      Connect a database, get REST + GraphQL APIs
    • Granular Policy-Based Auth
      Provide secure, autonomous data access
    • Visual Automation Builder
      Automate content and data workflows with ease
    • 50+ More Features
      Get everything you need out-of-the-box
    Project Showcase
    Built With Directus

    Built With Directus

    See what everyone's been building with Directus

  • Learn More
    • Blog
      Read our latest articles and guides
    • Case Studies
      Case studies and success stories
    • Community
      Join our new community forum.
    • Agency Directory
      Browse our list of agency partners
    • About Us
      Learn more about Directus and the team
    • Wall of Love
      See what others are saying about us
    • Contact
      Have a general inquiry or question for us?
    • Support
      Reach out to Directus support
    Watch Directus TV
    Directus TV
    Video

    Directus TV

    Go down the rabbit hole with hours of original video content from our team.

  • Developers
  • Enterprise
  • Pricing
Book a DemoGet StartedLog In
GitHub logo33,618
Directus Marketplace
Marketplace
  1. Extensions
  2. Integrations
  3. Templates
Back to Extensions
interface

YouTube Embed Interface

Search YouTube videos and generate embed codes

YouTube Embed Interface

Add a field to your collection for searching and embedding YouTube videos. You can also copy embed codes from the drawer directly, so you can paste them elsewhere.

Screenshot of the YouTube Interface in action

Installation

Refer to the Official Guide for details on installing the extension from the Marketplace or manually.

Usage

Select YouTube Embed as your interface when creating a new field in a collection.

You also need a YouTube Data API V3 key from Google Cloud Console:

  1. In Google Cloud console, visit APIs & Services
  2. Select a project if needed and go to Library.
  3. Look for YouTube Data API V3 and click on Enable.
  4. Open Credentials and click on Create Credentials, select API key.
  5. Paste the API key into the interface settings.

By default this will allow you to search any public video on YouTube and create an embed. If you want to limit the selection to a single channel, you can specify a channel ID in the interface settings (note: this is not the same as your channel handle).

You can find your own channel ID by following these instructions. To find other channel's IDs you may have to use a third party tool.

@directus-labs/youtube-embed-interface

npm i @directus-labs/youtube-embed-interface
This extension is sandboxed and can be installed through the Directus Marketplace. Learn more.
Mike Elsmore
Mike Elsmore
Verified
1.0.0
Works with v10.10.0+
Updated 10 months ago
MIT License
81.5 KiB (3 files)
npm
  • Directus LogoDirectus Logo

    A composable backend to build your Headless CMS, BaaS, and more. 

  • Solutions
    • Headless CMS
    • Backend-as-a-Service
    • Product Information
    • 100+ Things to Build
  • Resources
    • Documentation
    • Guides
    • Community
    • Release Notes
  • Support
    • Issue Tracker
    • Feature Requests
    • Community Chat
    • Cloud Dashboard
  • Organization
    • About
    • Careers
    • Brand Assets
    • Contact
©2025 Monospace Inc
  • Cloud Policies
  • License
  • Terms
  • Privacy