Listing videos of a channel with the YouTube API: Node.js

YouTube provides a simple way for people to store videos online and share them with others. These videos are easy to share via other forms of social media, email, and websites and can also be embedded in other websites.

One can either embed the video or link it. The difference between the two is an embedded video lets you borrow the video from another platform. In contrast, linking a video shares the URL of the video. When readers click the link, they are redirected to the page where the video is hosted. If you want to include videos on a website, the better option is to embed videos.

In this tutorial, we will learn how to use the youtube channel API & embed videos of a specific channel using Node.js.

In this tutorial, we will learn how to use the YouTube channel API & embed videos of a specific channel using Node.js. You can test the project here.

You can also get the full source code here

Without wasting more time, let’s divide this into 3steps,

1. Create a google cloud project and generate a YouTube API key.
2. Get the YouTube Channel Id.
3. Use the YouTube API and fetch videos from it.

---

Step 1: Generate YouTube API key

1. Goto https://console.cloud.google.com/
2. Create an account if you don’t have one. Google gives 300$ as free credit for any service as a free trial.
3. Type “YouTube Data API v3” in the search bar.
4. Click on the Enable option. This will enable the YouTube Data API for a particular project which has a default quota allocation of 10,000 units per day. You can learn more about quota here.

5. Click on credentials -> Create credentials -> API key. Copy this API key for later use.

Step 2: Youtube Channel Id

1. Go to Youtube & click on any video. For eg. https://www.youtube.com/watch?v=uzkD5SeuwzM
2. Click on Channel Name and it will redirect to the channel page for eg. https://www.youtube.com/channel/UCsXVk37bltHxD1rDPwtNM8Q

3. Copy the channel id from the URL which is alphanumeric code, “UCsXVk37bltHxD1rDPwtNM8Q”. Keep this channel code will use it later.channel id “UCsXVk37bltHxD1rDPwtNM8Q”.

Step 3: Setup Node project

1. Install Axios for making an HTTP request to YouTube fetching videos

npm i axios

2. Write a function to fetch the videos

const fetchVideos = async (queryObject) => {
 const options = {
  method: 'GET',
  url: `https://youtube.googleapis.com/youtube/v3/search? part=snippet&maxResults=50&id=${queryObject.channelId}&key=YOUR_API_KEY`
  };
 const result = await axios(options);
 return result.data
}

i. The part parameter specifies a comma-separated list of one or more channel resource properties that the API response will include.

ii. The maxResults parameter specifies the maximum number of items that should be returned in the result set. Acceptable values are 0 to 50, inclusive. The default value is 5.

iii. The id parameter specifies a comma-separated list of the YouTube channel ID(s) for the resource(s) that are being retrieved.

iv. The key parameter specifies the Google key that we have generated, which will authenticate your API call.

3. Call the fetch videos Function

Once a user enters the channel Id and hits the submit button, call the fetch videos function. This will return the Channel object. Learn more about the Channel object & its parameter here.

router.post('/fetch_videos', async (req, res) => {
 try {
  const fetchedVideos = await fetchVideos(req.body) ;
  const searchTemp = hbs.handlebars.compile(fs.readFileSync('views/searchResults.hbs').toString('utf-8'))  const html = searchTemp({ message: fetchedVideos.items });
  res.send({
    html,
  });
 } catch (err) {
    console.log(err);
 }
})

4. Search result file content

This will dynamically add the videos card once videos are fetched from API.

{{#if result}}
 <div class="row">
 {{#each result}}
   <div class="col-md-4 card mb-2 ml-1">
    <iframe class="card-img-top"  src="https://www.youtube.com/embed/{{id.videoId}}" frameborder="0"
 allowfullscreen></iframe>
   <div class="card-body">
   <h5 class="card-title">{{snippet.title}}</h5>
   <p class="card-text">{{snippet.description}}</p>
   </div>
  </div>
 {{/each}}
 </div>
{{/if}}

5. Index.hbs file

Now we will create the frontend form where users can enter the Channel Id and get the result.

Once a user enters the channel id, hit the submit button and fetch the result. And add the HTML content to the search div tag without refreshing the page. You should be able to see videos of a specific channel.

And that’s it, you can embed YouTube videos in any project using this simple API.

Thanks for reading.