How to use YouTube Data API & Fetch API to show videos on your website, with Vanilla JavaScript

Introduction

In this tutorial, you will learn how to use the YouTube Data API alongside the Fetch API to display videos on your website using Vanilla JavaScript. This process is essential for web developers looking to integrate dynamic video content from YouTube into their projects.

Step 1: Get Your API Key

To begin using the YouTube Data API, you need to obtain an API key. Follow these steps:

1. Go to the Google Cloud Console.
2. Create a new project or select an existing one.
3. Navigate to the "API & Services" section.
4. Click on "Library" and search for "YouTube Data API v3."
5. Enable the API for your project.
6. Go to the "Credentials" section and click on "Create Credentials."
7. Choose "API Key" and copy your newly generated key.

Practical Tip

Keep your API key secure and do not expose it in public repositories.

Step 2: Restrict Your API Key

To prevent unauthorized usage of your API key, it's advisable to set restrictions:

1. In the "Credentials" section, find your API key.
2. Click on the pencil icon to edit the key.
3. Under "Application restrictions," select "HTTP referrers (web sites)."
4. Add your website's URL to the list of allowed referrers.
5. Save your changes.

Common Pitfall

Avoid using an unrestricted API key, as this can lead to unexpected charges and abuse of your API quota.

Step 3: Get the HTTP URL from YouTube Docs

Next, you need to construct the HTTP URL to fetch video data:

1. Refer to the YouTube Data API documentation for the correct endpoint.

2. An example URL to get video information looks like this:

   https://www.googleapis.com/youtube/v3/videos?part=snippet&id={VIDEO_ID}&key={YOUR_API_KEY}
   

3. Replace {VIDEO_ID} with the actual ID of the YouTube video and {YOUR_API_KEY} with your API key.

Practical Tip

You can find the video ID in the URL of the YouTube video, which is the part after v=.

Step 4: Fetch Data Using the Fetch API

Now, use the Fetch API to retrieve data from the constructed URL:

1. Create a JavaScript function to make the fetch request:

   async function fetchVideoData(videoId) {
       const apiKey = 'YOUR_API_KEY';
       const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${videoId}&key=${apiKey}`;
       
       const response = await fetch(url);
       const data = await response.json();
       return data;
   }
   

2. Call this function with the desired video ID and handle the returned data appropriately.

Practical Tip

Use error handling with try-catch blocks to manage any issues that may arise during the fetch process.

Step 5: Display Video Data on Your Website

Finally, format and display the fetched video data on your web page:

1. Create HTML elements to display the video title, description, and thumbnail.

2. Use JavaScript to dynamically insert this data into your HTML.

   fetchVideoData('YOUR_VIDEO_ID').then(data => {
       const video = data.items[0];
       document.getElementById('video-title').innerText = video.snippet.title;
       document.getElementById('video-description').innerText = video.snippet.description;
       document.getElementById('video-thumbnail').src = video.snippet.thumbnails.default.url;
   });
   

Common Pitfall

Ensure that the HTML elements you are trying to access exist in the DOM before attempting to manipulate them.

Conclusion

In this tutorial, you learned how to integrate the YouTube Data API and Fetch API to display videos on your website using Vanilla JavaScript. Key steps included obtaining and securing your API key, constructing the correct HTTP URL, fetching video data, and dynamically displaying it on your site. For further enhancement, consider adding error handling and loading indicators for a better user experience. Happy coding!