Skip to main content

YouTube Data API Setup Guide

This guide will help you get a YouTube Data API key to fetch video metadata.

Step 1: Create a Google Cloud Project​

  1. Go to Google Cloud Console
  2. Sign in with your Google account
  3. Click Select a project (top left, next to "Google Cloud")
  4. Click NEW PROJECT
  5. Enter project details:
    • Project name: Agentification Academy (or any name)
    • Organization: Leave as default
  6. Click CREATE
  7. Wait for project to be created (~30 seconds)

Step 2: Enable YouTube Data API v3​

  1. Make sure your new project is selected (check top left)
  2. Go to APIs & Services > Library
  3. Search for: YouTube Data API v3
  4. Click on YouTube Data API v3
  5. Click ENABLE
  6. Wait for it to enable (~10 seconds)

Step 3: Create API Key​

  1. Go to APIs & Services > Credentials
  2. Click + CREATE CREDENTIALS (top of page)
  3. Select API key
  4. A dialog will appear with your new API key
  5. Copy the API key (looks like: AIzaSyD...)
  6. Click CLOSE
  1. Find your newly created API key in the list
  2. Click the Edit icon (pencil) next to it
  3. Under API restrictions:
    • Select Restrict key
    • Check YouTube Data API v3
    • Uncheck all others
  4. Under Application restrictions:
    • Select HTTP referrers (web sites)
    • Click + ADD AN ITEM
    • Add your domain(s): 
      http://localhost:*
      https://localhost:*
      https://your-domain.com/*
      https://*.vercel.app/*
  5. Click SAVE

Step 5: Add API Key to Environment Variables​

For Local Development (.env.local or .env)​

Add to your .env or .env.local file:

VITE_YOUTUBE_API_KEY=AIzaSyD_YOUR_ACTUAL_KEY_HERE

Replace AIzaSyD_YOUR_ACTUAL_KEY_HERE with your actual API key!

For Production (Vercel)​

If deploying to Vercel:

  1. Go to your Vercel project dashboard
  2. Navigate to Settings > Environment Variables
  3. Add new variable:
    • Name: VITE_YOUTUBE_API_KEY
    • Value: Your API key
    • Environments: Check Production, Preview, Development
  4. Click Save
  5. Redeploy your application for changes to take effect

Step 6: Verify API Key Works​

Run this test in your browser console or use curl:

# Replace YOUR_API_KEY with your actual key
# Replace VIDEO_ID with any YouTube video ID (e.g., dQw4w9WgXcQ)

curl "https://www.googleapis.com/youtube/v3/videos?id=dQw4w9WgXcQ&part=snippet,contentDetails&key=YOUR_API_KEY"

Expected response: JSON with video title, duration, thumbnail, etc.

If you get an error:

  • Check API key is correct
  • Verify YouTube Data API v3 is enabled
  • Check restrictions aren't blocking your request

API Quota Information​

Free Tier Limits:​

  • 10,000 quota units per day (FREE)
  • 1 video metadata request = 1 unit
  • Quota resets daily at midnight Pacific Time

Quota Calculation:​

10,000 units/day ÷ 1 unit per request = 10,000 video metadata fetches/day

This is more than enough! Even if you add 100 lessons/day, you'll only use 100 units.

If You Need More:​

  • Most unlikely, but you can request quota increase in Google Cloud Console
  • Or upgrade to paid plan (costs vary)

Security Best Practices​

✅ DO:​

  • Use environment variables (never hardcode)
  • Restrict API key to YouTube Data API v3 only
  • Add domain restrictions
  • Store in .env files (add to .gitignore)
  • Use separate keys for dev/production

❌ DON'T:​

  • Commit API keys to Git
  • Share API keys publicly
  • Use same key across multiple projects
  • Leave key unrestricted

Common Issues & Solutions​

Issue: "API key not valid"​

Solution:

  • Double-check you copied the entire key
  • Ensure no extra spaces
  • Verify API key hasn't been deleted

Issue: "The request cannot be completed because you have exceeded your quota"​

Solution:

  • Check Google Cloud Console quota usage
  • Wait for daily reset (midnight PT)
  • Request quota increase if needed

Issue: "Access Not Configured"​

Solution:

  • Make sure YouTube Data API v3 is enabled
  • Wait a few minutes after enabling
  • Try creating a new API key

Issue: API key works in curl but not in app​

Solution:

  • Check domain restrictions match your site
  • Verify environment variable name: VITE_YOUTUBE_API_KEY
  • Restart dev server after adding env variable
  • Check variable is being loaded: console.log(import.meta.env.VITE_YOUTUBE_API_KEY)

Environment Variable Checklist​

Before proceeding to use the YouTube service:

  • Created Google Cloud project
  • Enabled YouTube Data API v3
  • Generated API key
  • Restricted API key (optional but recommended)
  • Added VITE_YOUTUBE_API_KEY to .env or .env.local
  • Restarted development server
  • Tested API key with curl
  • Verified environment variable loads in app

Test Your Setup​

After adding the API key to your environment:

// Add this to any component temporarily
console.log('YouTube API Key:', import.meta.env.VITE_YOUTUBE_API_KEY);

// Should output: YouTube API Key: AIzaSyD...
// If undefined, restart your dev server!

Next Steps​

Once you have your API key set up:

  1. ✅ API key added to .env
  2. ✅ Dev server restarted
  3. ✅ Environment variable confirmed

You're ready to use the YouTube service!

The service will automatically:

  • Extract video IDs from YouTube URLs
  • Fetch video metadata (title, duration, thumbnail)
  • Parse duration from ISO 8601 format
  • Validate video IDs

Additional Resources​

API Key Ready? Let's start building the YouTube integration! 🎥