YouTube Data API v3 — Fetch Video Data Using Node.js

Have you wondered how websites or mobile and web apps display a feed of YouTube videos from a playlist or channel? That's thanks to YouTube Data API (or YouTube Data API v3).

Indeed, it's not ideal to maintain a list of several hundreds of video data manually. And that's one of the reasons why APIs exist. They provide developers and users with a set of interfaces and endpoints — leveraging third-party data in a convenient and useful way.

For example, a website that shows helpful videos from a tech channel, or a collection of videos from various channels for a specific niche or topic (e.g., gaming guides, lifestyle and fashion tips, or music videos).

In fact, my IVE Kingdom website uses YouTube API — curating and displaying various IVE videos into several collections and pages.

In this tutorial, I'll guide you through using YouTube API to get or retrieve video data, such as title, description, view count, like count, publish date, thumbnails, and more in Node.js.

Let's begin!

The Basics

For this tutorial, you should have a basic knowledge of modern JavaScript (or Node.js) and ES6 (ES2015) APIs, syntax, and concepts. For example, Array operations like map(), and the Fetch API.

Furthermore, to keep the scope of this article, I'll only focus on setting up and using YouTube Data API to retrieve video details in a Node.js script. What you do with the data depends on you and your project requirements.

That means I won't dive deep into the specifics of Node, Google Cloud Platform (GCP), or the YouTube API itself as they offer far more features and stuff that are beyond the scope of this tutorial.

Prerequisites

Before you start, you need the following:

1. A Google account — to access the Google Cloud Console for the YouTube Data API
2. Node.js — to execute JavaScript in a CLI (command line interface)

If you don't have Node installed, follow this tutorial to install it on a Windows PC.

Setting up the Google Cloud Project and Obtaining the YouTube Data API Key

Most third-party platforms and services require some form of authentication and/or authorization to use their services. One of the common methods is an API key. Some are free, while others are paid.

The same applies to GCP. To use the YouTube API, you need a valid API key to make requests and access Google's YouTube API and its data.

Generally, an API key is associated with a Google Cloud Platform project. So, let's go ahead and create one.

Step 1 — Creating a Google Cloud Project

First, log in to Google Cloud Console using your Google account and head over to the APIs & Services product.

You'll be asked to create a project if you don't already have one. I'll create a test project for this tutorial.

View full size

Step 2 — Enabling YouTube Data API v3

Once a project is created, open the API Library page within the APIs & Services product and search for "YouTube Data API v3".

View full size

Then, click on the Enable button to enable it for the selected project.

View full size

Step 3 — Creating Credentials or an API Key

Once the YouTube API is enabled, you'll be redirected to the API overview (or settings) page where you can set up credentials and more.

On this page, click on the Create Credentials button to create an API key.

View full size

Alternatively, navigate to the Credentials view from the sidebar, then click on the Create Credentials button on the top and select the API key option from the drop-down menu.

View full size

If prompted for the API and data type options, select YouTube Data API v3 as the API and Public data as the data type option.

View full size

Finally, an API key will be created for the project. Copy and save it somewhere. You'll need it for the Node script in the later steps.

View full size

Remember, all API requests incur a quota cost. Therefore, you should always secure the API key by restricting its usage.

To do so, navigate to the Credentials view and select (or edit) the API key.

View full size

On this page, apply API usage restrictions as necessary (e.g., limiting to a specific website or an IP address as well as the API it can call — YouTube Data API v3 in this case).

View full size

As a reminder, keep the API key private and only share it with trusted people.

Setting up the Node.js Script to Fetch YouTube Video Data

Now that you've set up a Google Cloud Console project and obtained an API key, it's time to go ahead and create the Nodejs script that'll call the YT API.

Step 1 — Creating the Node Script

Create a new JavaScript file (e.g. fetch-youtube-video.js) in your working directory and copy the following code:

const API_KEY = 'AIzaSyC47h3QVkJtZS8hk9StR2G7xE5_uwZvrVo';
const BASE_URL = 'https://youtube.googleapis.com/youtube/v3';

const params = {
  part: 'contentDetails,snippet,statistics',

  fields:
    'items(id,snippet(channelTitle,channelId,title,publishedAt,thumbnails),contentDetails(duration),statistics(viewCount,likeCount,commentCount))',
};

const VIDEO_IDS = ['Y8JFxS1HlDo', '6ZUIwj3FgUY', 'g36q0ZLvygQ'];

const URL = `${BASE_URL}/videos?part=${params.part}&fields=${params.fields}&id=${VIDEO_IDS.join('&id=')}&key=${API_KEY}`;

async function fetchVideoData() {
  try {
    const response = await fetch(URL);

    if (!response.ok) {
      console.error(
        `Error fetching video data:\nStatus: ${response.status}, ${response.statusText}\n\n`
      );

      return;
    }

    const data = await response.json();

    if (data.items.length === 0) {
      console.warn(
        `No video data returned for the video ID(s): ${VIDEO_IDS.join(', ')}`
      );

      return;
    }

    return data.items.map((video) => ({
      videoTitle: video.snippet.title,
      videoId: video.id,
      duration: video.contentDetails.duration,
      releasedAt: video.snippet.publishedAt,
      thumbnails: video.snippet.thumbnails,
      channelTitle: video.snippet.channelTitle,
      channelId: video.snippet.channelId,
      viewCount: video.statistics.viewCount,
      likeCount: video.statistics.likeCount,
      commentCount: video.statistics.commentCount,
      thumbnailMaxRes: video.snippet.thumbnails.maxres,
    }));
  } catch (error) {
    console.error('Error fetching video data:', error);

    return;
  }
}

async function run() {
  const response = await fetchVideoData();

  console.log(response);
}

run();

Update the API_KEY variable at the top of the code with the YouTube API key you copied in step 3 of the section above.

Let's go through the code to understand the important bits. You can skip the rest of this step to step 2 if you understand what the code does.

That being said, here's a brief explanation of the code.

The BASE_URL variable holds the YouTube API base URL.

The params object specifies various YouTube Data API v3 fetch options. Below are its details.

part

The part parameter is required and specifies a comma-separated list of various top-level video resource properties to retrieve via API.

Here, we only request the contentDetails, snippet, and statistics resource properties as we only need those.

Each of these properties contains various nested video properties (e.g., video duration) as explained below.

fields

The fields parameter filters the API response to only include the specific nested video properties (or fields) within the requested top-level resource parts.

Here, we only request the required properties, such as video title, its ID, duration, thumbnails, and other metadata.

Learn more about partial YouTube API responses.

The VIDEO_IDS array contains comma-separated YouTube video IDs for which the video details to get.

The URL variable combines all the aforementioned elements and constructs the actual URL that's passed to the fetch() method in the fetchVideoData() function.

Using console.log(), you can see the final URL that's passed to the YouTube Data API as shown below:

https://youtube.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,statistics&fields=items(id,snippet(channelTitle,channelId,title,publishedAt,thumbnails),contentDetails(duration
),statistics(viewCount,likeCount,commentCount))&id=Y8JFxS1HlDo&id=6ZUIwj3FgUY&id=g36q0ZLvygQ&key=AIzaSyC47h3QVkJtZS8hk9StR2G7xE5_uwZvrVo

Next, we have the fetchVideoData() asynchronous function. Most of it should be self-explanatory.

Within the function, everything is inside a try...catch statement to catch and handle errors. Additionally, we have console.error() and console.warn() along with return statements to handle some basic exceptions.

The last part of the function is worth paying attention to. It transforms or maps the returned data in a flat structure. Also, it accesses and transforms the items array in the API response as that's where the video resource or data is.

Depending on your project requirements, you could transform the data in later parts of the code. Or, you may not need to transform the data at all.

Lastly, we have the run() asynchronous function that simply runs the aforementioned function and logs the mapped video list in the console.

For this tutorial purposes, the data is logged to the console. In real-world applications or websites, you'd generally utilize the data in some meaningful way (e.g., create video cards similar to the YouTube website).

For example, on IVE Kingdom, the video data is passed down to subsequent Next.js components that render the video cards in a grid container. You can check out a live example here.

Step 2 — Running the Script and Fetching Video Data

Once you've created the Nodejs script, run it using Node either in a terminal or an IDE like VS Code.

node fetch-youtube-video

If the API response is OK and there are no errors, you should see a console output of the data from YouTube videos, such as video ID and title, channel ID and title, comment count, publish date, available thumbnails, and more.

Below is the data returned for the three YT videos requested via the API as per the script above:

[
  {
    videoTitle: "IVE 아이브 'LOVE DIVE' MV",
    videoId: 'Y8JFxS1HlDo',
    duration: 'PT2M59S',
    releasedAt: '2022-04-05T09:00:09Z',
    thumbnails: {
      default: [Object],
      medium: [Object],
      high: [Object],
      standard: [Object],
      maxres: [Object]
    },
    channelTitle: 'STARSHIP',
    channelId: 'UCYDmx2Sfpnaxg488yBpZIGg',
    viewCount: '293995690',
    likeCount: '2814784',
    commentCount: '125990',
    thumbnailMaxRes: {
      url: 'https://i.ytimg.com/vi/Y8JFxS1HlDo/maxresdefault.jpg',
      width: 1280,
      height: 720
    }
  },
  {
    videoTitle: "IVE 아이브 'I AM' MV",
    videoId: '6ZUIwj3FgUY',
    duration: 'PT3M5S',
    releasedAt: '2023-04-10T09:00:10Z',
    thumbnails: {
      default: [Object],
      medium: [Object],
      high: [Object],
      standard: [Object],
      maxres: [Object]
    },
    channelTitle: 'STARSHIP',
    channelId: 'UCYDmx2Sfpnaxg488yBpZIGg',
    viewCount: '300487893',
    likeCount: '2383946',
    commentCount: '129275',
    thumbnailMaxRes: {
      url: 'https://i.ytimg.com/vi/6ZUIwj3FgUY/maxresdefault.jpg',
      width: 1280,
      height: 720
    }
  },
  {
    videoTitle: "IVE 아이브 'REBEL HEART' MV",
    videoId: 'g36q0ZLvygQ',
    duration: 'PT3M13S',
    releasedAt: '2025-01-13T09:01:36Z',
    thumbnails: {
      default: [Object],
      medium: [Object],
      high: [Object],
      standard: [Object],
      maxres: [Object]
    },
    channelTitle: 'STARSHIP',
    channelId: 'UCYDmx2Sfpnaxg488yBpZIGg',
    viewCount: '28790368',
    likeCount: '592282',
    commentCount: '38246',
    thumbnailMaxRes: {
      url: 'https://i.ytimg.com/vi/g36q0ZLvygQ/maxresdefault.jpg',
      width: 1280,
      height: 720
    }
  }
]

Wrapping Up

That's it! You learned how to retrieve the video data using the official YouTube Data API v3 in Node.js. In addition, the script includes some basic code checks and error handling for a graceful developer experience (DX). ✨

Now you have a working Node script to retrieve and access video data from different YouTube channels! What's awesome is that the API allows a wide variety of use cases beyond displaying videos on a website.

In fact, developers can use the API to get even more creative, such as creating a SaaS-based YouTube analytics platform for various YouTube content (e.g., YouTube Shorts or live streams) for end-users. 🚀

Keep in mind that I only used the list method of the Video resource. There are more methods (e.g., insert or delete) and resource types (e.g., Channels, Playlists, or Thumbnails).

As I mentioned above, covering advanced YT API use cases is beyond the scope of this article. So, feel free to explore the API docs for all the possibilities and available options.

And as always, if you found this tutorial helpful, please share it with others.

Feel free to contact me at [email protected] if you run into any issues implementing the YT API v3. 🙂