Videos are not fetching most of the time, is this an API limitation or is the code wrong when its trying to fetch videos? (sry I don't really know coding)
I mostly tried to separate long and short format videos so I can display them in 2 pages, maybe that's something to do with the fetching errors? (I have a another code that basically filters the other way around)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>YouTube VODs on Fourthwall</title><style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body { font-family: 'Suisse Intl', sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; } .vod-container { max-width: 1200px; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 20px auto; padding: 10px; } .vod { flex: 1 1 100%; max-width: 100%; background: #ff2c2f; padding: 10px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } @media (min-width: 600px) { .vod { flex: 1 1 60%; max-width: 60%; } } @media (min-width: 900px) { .vod { flex: 1 1 45%; max-width: 45%; } } .vod iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: none; border-radius: 8px; } .vod h3 { margin: 10px 0 0; font-family: 'Poppins', sans-serif; font-size: 16px; text-align: center; } .loading { display: none; font-size: 16px; color: #555; text-align: center; } .load-more-container { display: flex; justify-content: center; width: 100%; } .load-more { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; margin: 20px 0; } .load-more:disabled { background-color: #aaa; cursor: not-allowed; }</style></head><body><div class="vod-container" id="vod-container"></div><p class="loading" id="loading">Loading videos...</p><div class="load-more-container"><button class="load-more" id="load-more">Load More</button></div><script> const API_KEY = "YOUR_API_KEY"; // Replace with your YouTube Data API v3 API KEY const CHANNEL_ID = "YOUR_CHANNEL_ID"; // Replace with desired channel ID const MAX_RESULTS = 5; let nextPageToken = ""; const vodContainer = document.getElementById('vod-container'); const loadingIndicator = document.getElementById('loading'); const loadMoreButton = document.getElementById('load-more'); async function fetchYouTubeVideos() { loadingIndicator.style.display = "block"; loadMoreButton.disabled = true; try { const response = await fetch( `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&maxResults=${MAX_RESULTS}&order=date&type=video&pageToken=${nextPageToken}&key=${API_KEY}` ); const data = await response.json(); if (!data.items.length) { vodContainer.innerHTML = "<p>No videos found.</p>"; return; } const videoIds = data.items.map(video => video.id.videoId).join(","); const detailsResponse = await fetch( `https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=${videoIds}&key=${API_KEY}` ); const detailsData = await detailsResponse.json(); const filteredVideos = data.items.filter((video, index) => { const duration = detailsData.items[index]?.contentDetails?.duration; if (!duration) return false; const match = duration.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/); const hours = parseInt(match[1] || "0", 10); const minutes = parseInt(match[2] || "0", 10); const seconds = parseInt(match[3] || "0", 10); return (hours * 3600 + minutes * 60 + seconds) > 300; }); filteredVideos.forEach(video => { const videoId = video.id.videoId; const title = video.snippet.title; const vodElement = document.createElement('div'); vodElement.classList.add('vod'); vodElement.innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}" allowfullscreen></iframe><h3>${title}</h3> `; vodContainer.appendChild(vodElement); }); nextPageToken = data.nextPageToken || ""; loadMoreButton.style.display = nextPageToken ? "block" : "none"; } catch (error) { console.error("Error fetching videos:", error); vodContainer.innerHTML = "<p>Failed to load videos. Please try again later.</p>"; } finally { loadingIndicator.style.display = "none"; loadMoreButton.disabled = false; } } loadMoreButton.addEventListener('click', fetchYouTubeVideos); fetchYouTubeVideos();</script></body></html>