DEV Community

Cover image for Fetch any YouTube video’s metadata in 2 lines
Navin Kodag
Navin Kodag

Posted on

1

Fetch any YouTube video’s metadata in 2 lines

So, i was looking for a way to quickly get a YouTube video’s metadata without having to setup the developer account and get an API key since i just needed to integrate it as one small feature.

After doing a quick Google search, I came across the oembed API to fetch metadata for any video with using its link. So it goes like dis

tldr:

import axios, { AxiosRequestConfig } from "axios";
const getMetadata = async () => {
const videoUrl: string = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
return (await axios.get(`http://youtube.com/oembed?url=${videoUrl}&format=json`)).data;
};

But after a bit of refactoring 🧹…
import axios, { AxiosRequestConfig } from "axios";
const getMetadata = async () => {
const videoUrl: string = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
const requestUrl: string = `http://youtube.com/oembed?url=${videoUrl}&format=json`;
const result = await axios.get(requestUrl);
return result.data;
};

The basic HTTP request looks like this…
[http://youtube.com/oembed?url=${YOUR](http://youtube.com/oembed?url=${YOUR)_VIDEO_URL}&format=json
Enter fullscreen mode Exit fullscreen mode

Gives us a response like this…

**{
**"title": "Rick Astley - Never Gonna Give You Up (Video)",
"author_name": "RickAstleyVEVO",
"author_url": "[https://www.youtube.com/user/RickAstleyVEVO](https://www.youtube.com/user/RickAstleyVEVO)",
"type": "video",
"height": **113**,
"width": **200**,
"version": "1.0",
"provider_name": "YouTube",
"provider_url": "[https://www.youtube.com/](https://www.youtube.com/)",
"thumbnail_height": **360**,
"thumbnail_width": **480**,
"thumbnail_url": "[https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg](https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg)",
"html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
**}**
Enter fullscreen mode Exit fullscreen mode

That’s pretty neat :]
navinko

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (1)

Collapse
 
tomwilsonpro profile image
Tom Wilson

Hi. I don't understand the process that you were trying to describe period is it possible for you to tell me the geologiation of this YouTube video? m.youtube.com/watch?v=8EQWLBlpK3s

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more