I currently work on a project where I need to showcase the 10 latest videos of the website owner, but using the youtube DATA API v3 but during testing I quickly ran out of the 10,000 assigned daily quota points, because I am using the "Search" request which costs 100 points, is there another way to get the video ids? Using reactjs here is what I tried
import { useEffect, useState } from "react"
import useFetch from "../../hooks/useFetch"
export default function YoutubeEmbed() {
const KEY = '[Redacted]'
const CHANNEL_ID = '[Redacted]'
const MAX_RESULTS = '10'
const YOUTUBE_API_URL = `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&maxResults=${MAX_RESULTS}&order=date&key=${KEY}`
const SCALE_FATOR = 1.5
const [currentVideoIndex,setCurrentVideoIndex] = useState(0)
const [videos, setVideos] = useState([])
const { loading, error, value } = useFetch(
YOUTUBE_API_URL,
{},
[])
const getVideos = () => {
let items = value?.items
let videos = items?.map(((video) => {
return {
id: video.id.videoId,
title: video.snippet.title,
description: video.snippet.description,
thumbnails: video.snippet.thumbnails
}
}))
return videos
}
useEffect(() => {
if (!loading) {
if (!error) {
setVideos(getVideos())
} else console.log(error);
}
}, [loading])
return (
<>
<div className="youtube-current-video">
<iframe
src={`https://www.youtube.com/embed/${videos[currentVideoIndex]?.id}`}
allowFullScreen
frameborder="0"
width={`${480 * SCALE_FATOR}px`}
height={`${270 * SCALE_FATOR}px`}
/>
</div>
</>
)
}