How to Integrate YouTube API with V0

Navigate to console.cloud.google.com and create a new Google Cloud project (or use an existing one). In the left sidebar, go to APIs & Services → Library and search for 'YouTube Data API v3'. Click on it and then click 'Enable' to activate the API for your project. Next, go to APIs & Services → Credentials and click 'Create Credentials' → 'API Key'. Google creates an API key immediately. Click 'Edit API Key' to configure restrictions — this is important for security. Under Application Restrictions, select 'HTTP referrers' and add your Vercel deployment URL (e.g., `your-app.vercel.app/*`) plus `localhost:3000/*` for local development. Under API Restrictions, select 'Restrict key' and choose 'YouTube Data API v3' from the dropdown. Click 'Save'. Restricting your API key prevents it from being abused even if someone discovers it. While the YouTube API key can be used client-side (it's not as sensitive as a secret key), proxying it through a Next.js API route is still best practice — it lets you add caching, rate limiting, and keeps you from having to expose the key in your JavaScript bundle. Note your API key — you'll need it for the Vercel environment variable in the next step. Also note your daily quota: 10,000 units/day on the free tier. The `search.list` endpoint costs 100 units per call, while `videos.list` and `playlistItems.list` cost just 1 unit each. Design your API routes to use the cheaper endpoints where possible.

Create a Next.js API route at `app/api/youtube/route.ts` that queries the YouTube Data API v3. The API base URL is `https://www.googleapis.com/youtube/v3/` and authentication uses your API key as a query parameter (`key={API_KEY}`). For fetching your channel's videos efficiently, use the uploads playlist pattern: every YouTube channel has an automatically generated 'uploads' playlist whose ID is your channel ID with 'UC' replaced by 'UU'. For example, if your channel ID is `UCxxxxxx`, the uploads playlist ID is `UUxxxxxx`. Fetch this playlist's items using `playlistItems.list` (1 unit) rather than `search.list` (100 units). The `playlistItems.list` endpoint returns video IDs but not full video details. Make a second call to `videos.list` with the video IDs to get statistics (view count, like count, duration). Batch the IDs comma-separated in a single `videos.list` call — you can fetch up to 50 videos per call. Key YouTube API parameters: - `part=snippet,contentDetails,statistics` on videos.list for full metadata - `maxResults=50` for pagination (YouTube caps at 50 per request) - `pageToken` for cursor-based pagination through large channels - `order=date` for chronological ordering Normalize the response before returning to the frontend: format view counts, extract video duration from ISO 8601 format (PT4M20S → '4:20'), calculate relative publish dates ('3 days ago'), and include the embed URL (`https://www.youtube.com/embed/{videoId}`) for the iframe player.

1// app/api/youtube/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const API_KEY = process.env.YOUTUBE_API_KEY!;
5const BASE = 'https://www.googleapis.com/youtube/v3';
6const CHANNEL_ID = process.env.YOUTUBE_CHANNEL_ID!;
7
8function formatDuration(iso: string): string {
9  const match = iso.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
10  if (!match) return '0:00';
11  const h = parseInt(match[1] || '0');
12  const m = parseInt(match[2] || '0');
13  const s = parseInt(match[3] || '0');
14  const mm = m.toString().padStart(h > 0 ? 2 : 1, '0');
15  const ss = s.toString().padStart(2, '0');
16  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
17}
18
19function formatViews(count: string): string {
20  const n = parseInt(count);
21  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M views`;
22  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K views`;
23  return `${n} views`;
24}
25
26export async function GET(request: NextRequest) {
27  const { searchParams } = new URL(request.url);
28  const resource = searchParams.get('resource') || 'videos';
29  const playlistId = searchParams.get('playlistId') || '';
30  const pageToken = searchParams.get('pageToken') || '';
31  const videoId = searchParams.get('videoId') || '';
32
33  try {
34    if (resource === 'videos') {
35      // Use uploads playlist for efficiency (1 unit vs 100 for search)
36      const uploadsPlaylistId = CHANNEL_ID.replace(/^UC/, 'UU');
37      const itemsUrl = new URL(`${BASE}/playlistItems`);
38      itemsUrl.searchParams.set('part', 'snippet,contentDetails');
39      itemsUrl.searchParams.set('playlistId', playlistId || uploadsPlaylistId);
40      itemsUrl.searchParams.set('maxResults', '24');
41      itemsUrl.searchParams.set('key', API_KEY);
42      if (pageToken) itemsUrl.searchParams.set('pageToken', pageToken);
43
44      const itemsRes = await fetch(itemsUrl.toString(), { next: { revalidate: 600 } });
45      const itemsData = await itemsRes.json();
46
47      if (!itemsData.items?.length) return NextResponse.json({ videos: [], nextPageToken: null });
48
49      // Fetch video details in batch
50      const ids = itemsData.items.map((i: any) => i.contentDetails.videoId).join(',');
51      const detailsUrl = new URL(`${BASE}/videos`);
52      detailsUrl.searchParams.set('part', 'snippet,contentDetails,statistics');
53      detailsUrl.searchParams.set('id', ids);
54      detailsUrl.searchParams.set('key', API_KEY);
55
56      const detailsRes = await fetch(detailsUrl.toString(), { next: { revalidate: 600 } });
57      const detailsData = await detailsRes.json();
58
59      const videos = (detailsData.items || []).map((v: any) => ({
60        id: v.id,
61        title: v.snippet.title,
62        description: v.snippet.description?.slice(0, 200),
63        publishedAt: v.snippet.publishedAt,
64        thumbnail: v.snippet.thumbnails?.maxres?.url || v.snippet.thumbnails?.high?.url,
65        duration: formatDuration(v.contentDetails.duration),
66        views: formatViews(v.statistics.viewCount || '0'),
67        likes: v.statistics.likeCount || '0',
68        embedUrl: `https://www.youtube.com/embed/${v.id}`,
69      }));
70
71      return NextResponse.json({
72        videos,
73        nextPageToken: itemsData.nextPageToken || null,
74      });
75    }
76
77    if (resource === 'channel') {
78      const channelUrl = new URL(`${BASE}/channels`);
79      channelUrl.searchParams.set('part', 'snippet,statistics,brandingSettings');
80      channelUrl.searchParams.set('id', CHANNEL_ID);
81      channelUrl.searchParams.set('key', API_KEY);
82      const res = await fetch(channelUrl.toString(), { next: { revalidate: 3600 } });
83      return NextResponse.json(await res.json());
84    }
85
86    return NextResponse.json({ error: 'Invalid resource' }, { status: 400 });
87  } catch (err: any) {
88    return NextResponse.json({ error: err.message }, { status: 500 });
89  }
90}

Navigate to your Vercel project → Settings → Environment Variables. Add two variables that your YouTube API route needs. Add `YOUTUBE_API_KEY` — this is the API key you created in Google Cloud Console. Set it as a server-only variable (no `NEXT_PUBLIC_` prefix). While YouTube API keys are less sensitive than database credentials, keeping them server-side prevents malicious users from discovering your key and burning through your quota. Add `YOUTUBE_CHANNEL_ID` — your YouTube channel ID. Find this in YouTube Studio → Settings → Channel → Advanced settings, or look at your channel's URL on YouTube. Channel IDs start with 'UC' followed by 22 characters (e.g., `UCBcRF18a7Qf58cVbTVChMuA`). This is not sensitive information but storing it as an environment variable makes it easy to change without redeploying code. For public-facing video galleries where the same channel is always shown, these two variables are all you need. If you're building a multi-creator platform where different channels are shown to different users, store channel IDs in your database and pass them as query parameters rather than as environment variables. After saving, redeploy your application. Test the API route by visiting `/api/youtube?resource=videos` in your browser — you should see a JSON array of your channel's latest videos. If you're building for multiple environments (Production, Preview, Development), you can use the same API key for all environments since YouTube API quota is shared. For high-traffic production apps, consider creating separate API keys per environment so quota issues in one environment don't affect others.

Connect the V0-generated video gallery components to your YouTube API route and implement the video player. The gallery fetches from `/api/youtube?resource=videos` and maps the response to your thumbnail card components. The video player uses YouTube's iframe embed. For the thumbnail grid, use Next.js's `<Image>` component for YouTube thumbnails — configure `i.ytimg.com` in your next.config.js image domains. YouTube thumbnail URLs follow the pattern `https://i.ytimg.com/vi/{videoId}/maxresdefault.jpg` for max resolution. Always include a fallback since not all videos have maxres thumbnails — check `thumbnail` from the API which already selects the best available quality. For video playback, use an iframe with the `embedUrl` from the API response. Add these parameters to the embed URL for a better experience: `?autoplay=1` when opening from a click, `&rel=0` to hide related videos from other channels, `&modestbranding=1` to minimize YouTube branding. The iframe should have `allow='autoplay; encrypted-media'` and `allowFullScreen` attributes. For the load more / pagination pattern, store the `nextPageToken` from the API response and append it to the next fetch request. Show a 'Load More Videos' button when `nextPageToken` is non-null. Append new videos to the existing array rather than replacing it. Implement a simple video selection state: when a user clicks a thumbnail, set `selectedVideoId` in component state and show the iframe embed for that video. Either in a modal or inline player replacing the clicked card. Keep the video playing by only changing the `src` of the existing iframe rather than unmounting and remounting it.

1// components/VideoPlayer.tsx — YouTube iframe embed
2'use client';
3import { useEffect, useRef } from 'react';
4
5interface VideoPlayerProps {
6  embedUrl: string;
7  title: string;
8  onClose: () => void;
9}
10
11export function VideoPlayer({ embedUrl, title, onClose }: VideoPlayerProps) {
12  const playerUrl = `${embedUrl}?autoplay=1&rel=0&modestbranding=1`;
13
14  useEffect(() => {
15    const handler = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
16    window.addEventListener('keydown', handler);
17    return () => window.removeEventListener('keydown', handler);
18  }, [onClose]);
19
20  return (
21    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4"
22      onClick={onClose}>
23      <div className="w-full max-w-4xl" onClick={e => e.stopPropagation()}>
24        <div className="flex justify-between items-center mb-2">
25          <h2 className="text-white font-semibold truncate">{title}</h2>
26          <button onClick={onClose} className="text-white hover:text-gray-300 text-2xl leading-none">&times;</button>
27        </div>
28        <div className="relative pt-[56.25%]">
29          <iframe
30            className="absolute inset-0 w-full h-full rounded-lg"
31            src={playerUrl}
32            title={title}
33            allow="autoplay; encrypted-media; picture-in-picture"
34            allowFullScreen
35          />
36        </div>
37      </div>
38    </div>
39  );
40}