Menu

1 / 2

Adding YouTube thumbnails and real titles to existing projects — without a migration

DEV Community·nareshipme·6 months ago
#CGwjmWuO
#fix#nextjs#webdev#youtube#title
Reading 0:00
15s threshold

Sometimes the best UX fix is the one that requires no new infrastructure. Here's how we added YouTube thumbnails and real video titles to ClipCrafter project cards — using only what was already in the database and what YouTube freely provides.

The problem

Project cards on the dashboard looked like this:

Title: YouTube video (8fcJ4Y-uxCw)

Thumbnail: none

Status badge, timestamp, action buttons

Not great. Users couldn't tell their projects apart at a glance. The fix seemed obvious — store the real title and a thumbnail URL. But that would mean:

A database migration to add a thumbnail_url column

A backfill for existing rows

Storing the title at upload time

We did none of those things.

Fix 1: Real titles via YouTube's oEmbed API

YouTube's oEmbed endpoint returns video metadata including the title — no API key required :

GET https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=VIDEO_ID&format=json

Enter fullscreen mode

Exit fullscreen mode

Response:

{ "title" : "The actual video…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.