// 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);
});
};