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,
- Create a google cloud project and generate a YouTube API key.
- Get the YouTube Channel Id.
- Use the YouTube API and fetch videos from it.
Step 1: Generate YouTube API key
- Goto https://console.cloud.google.com/
- Create an account if you don’t have one. Google gives 300$ as free credit for any service as a free trial.
- Type “YouTube Data API v3” in the search bar.
- 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
- Go to Youtube & click on any video. For eg. https://www.youtube.com/watch?v=uzkD5SeuwzM
- 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 axios2. 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.
Hello noob2geek.in admin, You always provide practical solutions and recommendations.
Hi noob2geek.in webmaster, You always provide great information and insights.
To the noob2geek.in owner, Thanks for the detailed post!
Dear noob2geek.in admin, Your posts are always informative and well-explained.
Hi noob2geek.in webmaster, Good to see your posts!
Cool. I spent a long time looking for relevant content and found that your article gave me new ideas, which is very helpful for my research. I think my thesis can be completed more smoothly. Thank you.
Hi noob2geek.in owner, Keep up the good work!
Dear noob2geek.in owner, Your posts are always well-supported by facts and figures.
Hello noob2geek.in owner, Thanks for the informative post!
Thanks for the feedback! That’s an interesting point. I suppose there are many reasons, internal and external, why we do not accomplish all that we might. Regardless, I am thankful for the Lord’s grace in that. Thanks again!
Hi noob2geek.in administrator, Your posts are always informative and up-to-date.
Hi noob2geek.in administrator, Keep up the good work, admin!
Hello noob2geek.in admin, Your posts are always well-supported by facts and figures.
Dear noob2geek.in webmaster, You always provide valuable feedback and suggestions.
Dear noob2geek.in admin, Your posts are always well presented.
Hi noob2geek.in webmaster, Your posts are always well-structured and logical.
Hello noob2geek.in webmaster, You always provide useful information.
Hi noob2geek.in administrator, You always provide great examples and real-world applications.
Dear noob2geek.in webmaster, Your posts are always well-referenced and credible.
Hello noob2geek.in owner, You always provide great resources and references.
Dear noob2geek.in webmaster, Great content!
To the noob2geek.in admin, Your posts are always well-supported by research and data.
Dear noob2geek.in administrator, Your posts are always on topic and relevant.
Hello noob2geek.in admin, You always provide clear explanations and step-by-step instructions.
To the noob2geek.in owner, Your posts are always well-supported by facts and figures.
Hello noob2geek.in owner, Your posts are always thought-provoking and inspiring.
Dear noob2geek.in administrator, You always provide practical solutions and recommendations.
To the noob2geek.in owner, You always provide in-depth analysis and understanding.
Hello noob2geek.in Admin, similar right here: Link Text