<!DOCTYPE html><html><head><title>YouTube</title><style> /* Customize the styling and layout as desired */ .video { display: flex; margin-bottom: 20px; } .thumbnail { margin-right: 10px; } .details { display: flex; flex-direction: column; }</style></head><body><input type="text" id="searchInput" placeholder="Search YouTube"><button onclick="searchVideos()">Search</button><div id="searchResults"></div><script> const API_KEY = "AIzaSy..."; function searchVideos() { const searchQuery = document.getElementById("searchInput").value; const request = gapi.client.youtube.search.list({ part: "snippet", type: "video", q: searchQuery, maxResults: 10, }); request.execute((response) => { const searchResults = document.getElementById("searchResults"); searchResults.innerHTML = ""; response.items.forEach((video) => { const videoElement = document.createElement("div"); videoElement.classList.add("video"); const thumbnailElement = document.createElement("img"); thumbnailElement.src = video.snippet.thumbnails.default.url; thumbnailElement.classList.add("thumbnail"); videoElement.appendChild(thumbnailElement); const detailsElement = document.createElement("div"); const titleElement = document.createElement("h3"); titleElement.innerText = video.snippet.title; detailsElement.appendChild(titleElement); const viewsElement = document.createElement("p"); viewsElement.innerText = "Views: " + video.statistics.viewCount; detailsElement.appendChild(viewsElement); const durationElement = document.createElement("p"); durationElement.innerText = "Duration: " + video.contentDetails.duration; detailsElement.appendChild(durationElement); videoElement.appendChild(detailsElement); searchResults.appendChild(videoElement); }); }); } function init() { gapi.client.init({ apiKey: API_KEY, discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"], }).then(() => { console.log("YouTube Data API initialized"); }); } // Load the YouTube Data API script const script = document.createElement("script"); script.src = "https://apis.google.com/js/client.js"; script.onload = () => { gapi.load("client", init); }; document.body.appendChild(script);</script></body></html>When I test my web of this index, I typed something in the search, and clicked "Search", nothing happens.Why? Since I created this key almost a month ago.
I tried setting an application restriction to:Website
I added a website restriction to:status (website)URL: http://redfire.atspace.cc/wii/videos/youtube/index.html
API restrictions:Restrict key (selected)Selected APIs:YouTube API v3However, what I was expecting to happen at the beginning when I open this index web, is for this to let the recommended videos appear within a thumbnail, views, and how long the video is under the search section.