Deploying a VOD platform through Vercel makes the process straightforward by providing a frontend framework, serverless APIs, and a global edge network for fast delivery. By combining YouTube for video hosting/streaming and Vercel for frontend + backend, you can quickly build and scale a VOD solution.

Build Your Frontend

We"ll use Next.js to create the frontend and embed YouTube videos with the IFrame API.

code
npx create-next-app vod-platform
cd vod-platform

YouTube Player Component (components/YouTubePlayer.js):

code
import { useEffect, useRef } from "react";

export default function YouTubePlayer({ videoId }) {
const ref = useRef(null);

useEffect(() => {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
document.body.appendChild(tag);

window.onYouTubeIframeAPIReady = () => {
new window.YT.Player(ref.current, {
videoId,
playerVars: { modestbranding: 1, rel: 0 },
});
};
}, [videoId]);

return <div ref={ref} style={{ width: "100%", height: "400px" }} />;
}

Use in a Page (pages/index.js):

code
import YouTubePlayer from "../components/YouTubePlayer";

export default function Home() {
return (
<main>
<h1>My VOD Platform</h1>
<YouTubePlayer videoId="dQw4w9WgXcQ" />
</main>
);
}

Set up Video Hosting/Streaming

YouTube handles storage, encoding, and adaptive streaming. Global CDN delivery. Embedding with iframe or API. Simply upload your videos to YouTube, get the videoId or playlistId, and embed them as shown above. For playlists, you can fetch items using the YouTube Data API.

Banner for Video Embedding

Implement Serverless API Logic

Use Vercel Functions (Next.js API routes) to fetch playlists securely with your API key.

API Route (pages/api/playlist.js):

code
export default async function handler(req, res) {
const { playlistId } = req.query;
const key = process.env.YOUTUBE_API_KEY;

const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&maxResults=10&playlistId=${playlistId}&key=${key}`;
const r = await fetch(url);
const data = await r.json();

const items = data.items.map((it) => ({
videoId: it.contentDetails.videoId,
title: it.snippet.title,
thumb: it.snippet.thumbnails.medium.url,
}));

res.status(200).json(items);
}

This keeps your YouTube API key secure and delivers video metadata to the frontend.

Connect to a Database

Use an external DB (e.g., Supabase, PlanetScale, or Neon) for app-specific data such as user info, favorites, or watch history.

Example with Prisma Query:

code
// /pages/api/favorites.js
import { db } from "../../lib/db"; // your DB client

export default async function handler(req, res) {
const favorites = await db.favorite.findMany();
res.status(200).json(favorites);
}

Store your DATABASE_URL in Vercel environment variables.

Deploy to Vercel

  • Push code to GitHub/GitLab.
  • Go to Vercel → New Project → Import Repo.
  • Add environment variables: YOUTUBE_API_KEY, DATABASE_URL (if using a DB)
  • Click Deploy.
  • Access your app at https://vod-on-vercel.vercel.app.

What happens after deploy (and how to verify)

You"ll get a URL like https://vod-on-vercel.vercel.app.

  • Open Home (/): your page renders the embedded YouTube player (via the IFrame API) and plays the sample videoId.
  • Open Playlist API:
code
https://vod-on-vercel.vercel.app/api/playlist?playlistId=PLxxxxxxxxxxxx

You should see JSON like:

code
[ {"videoId":"abc123","title":"Trailer","thumb":"https://i.ytimg.com/vi/abc123/mqdefault.jpg"},

{"videoId":"def456","title":"Episode 1","thumb":"https://i.ytimg.com/vi/def456/mqdefault.jpg"}

code
]

This data is returned by your serverless function that calls the YouTube Data API v3 playlistItems.list with your API key stored in Vercel env vars (kept off the client).