Kevin Powell - Community•4mo ago

NOT FETCHING YOUTUBE VIDEOS

the code it's not fetching youtube videos, actually it did like 3hours ago, didn't change nothing, but now randomly just doesn't fetch and i'm having this problem and this is the code

// Fetch YouTube videos based on the query, limited to the top 3 results
const fetchYouTubeVideos = async (query) => {
  try {
    const response = await fetch(
      `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${query}&maxResults=3&key=AIzaSyCXXlgmc72t4UJPJY4rMVCqu5s3hT3Rxdo`
    );
    const data = await response.json();
    return data.items;
  } catch (error) {
    console.error("Error fetching YouTube videos:", error);
    return [];
  }
};

// Display the top 3 YouTube videos on the page
const displayVideos = async (query) => {
  const videos = await fetchYouTubeVideos(query);
  const videoList = document.getElementById("video-list");
  videoList.innerHTML = "";

  videos.forEach((video) => {
    const videoItem = document.createElement("div");
    videoItem.innerHTML = `
          <h4>${video.snippet.title}</h4>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/${video.id.videoId}" frameborder="0" allowfullscreen></iframe>
      `;
    videoList.appendChild(videoItem);
  });
};

// Fetch YouTube videos based on the query, limited to the top 3 results
const fetchYouTubeVideos = async (query) => {
  try {
    const response = await fetch(
      `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${query}&maxResults=3&key=AIzaSyCXXlgmc72t4UJPJY4rMVCqu5s3hT3Rxdo`
    );
    const data = await response.json();
    return data.items;
  } catch (error) {
    console.error("Error fetching YouTube videos:", error);
    return [];
  }
};

// Display the top 3 YouTube videos on the page
const displayVideos = async (query) => {
  const videos = await fetchYouTubeVideos(query);
  const videoList = document.getElementById("video-list");
  videoList.innerHTML = "";

  videos.forEach((video) => {
    const videoItem = document.createElement("div");
    videoItem.innerHTML = `
          <h4>${video.snippet.title}</h4>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/${video.id.videoId}" frameborder="0" allowfullscreen></iframe>
      `;
    videoList.appendChild(videoItem);
  });
};

21 Replies

clevermissfox•4mo ago

Maybe you exceeded your daily quota (read,write, and upload take different number of units) or are running into some restrictions on your api key? I would take a look on the google cloud console and see what’s going on

samidevOP•4mo ago

this is the api

clevermissfox•4mo ago

That’s the key , which I would revoke and use a new one esp if it’s unrestricted , you don’t want someone on here taking it . Look on the console under your project to see the analytics about requests

samidevOP•4mo ago

u mean this ?

clevermissfox•4mo ago

- go to cloud console - select the correct project, which uses the YouTube API. - find "APIs & Services" and select "Dashboard". - Click on the "YouTube Data API v3" from the list of enabled APIs. - select "Quotas" from the left-hand menu. You’ll see information about your API usage, including the number of requests made today and your remaining quota If you have posted that key on other forums someone else may have taken it for a spin. Revoke it and generate a new key and try again whenever your quota resets

samidevOP•4mo ago

ok wait created an project now should i create a credentials ?

samidevOP•4mo ago

clevermissfox•4mo ago

Yes

samidevOP•4mo ago

ok now ifixed it is fetching but still im getting some errors ??

samidevOP•4mo ago

it is actually showing the videos but still i'm having these errors ?

clevermissfox•4mo ago

May be a browser extension , try disabling all your extensions

samidevOP•4mo ago

u think could be react developer tool ?

clevermissfox•4mo ago

You also should set up some error handling in your displayVideos function too. And might want to consider using a caching plug-in to cut down on the number of requests. I have no idea but it’s a possibility. Try disabling it and seeing

samidevOP•4mo ago

hmmm cutting down the number of requestts and handling error im not good with these tbh

clevermissfox•4mo ago

You already have a try/catch in your fetchYoutubeVideos function. Implement a try/catch in the display function so that if the videos don’t load you log the error and set videoList.innerHTML = ‘<p>Error displaying videos</p>’; or whatever you want

ἔρως•4mo ago

if you're trying to just show videos of some account, why don't you use the rss feed?

clevermissfox•4mo ago

I think its based on a keyword query search , possible user input but not sure. Just my guess based on the screenshot of the error where the query was “JavaScript Basics”.

ἔρως•4mo ago

i know, but if the goal of this is to just list videos of a channel, then the rss feed is a better option what one writes and what one intends to do doesn't always correspond in this case, if the goal isn't to actually have a functioning search, but to just list videos of channels, then using the feed is the way

clevermissfox•4mo ago

Agree

what one writes and what one intends to do doesn't always correspond

Ain’t that the truth !

ἔρως•4mo ago

that's why ai will never win but seriously, knowing the context (and intent) is very important

Gaming

Programming

NOT FETCHING YOUTUBE VIDEOS