Can anyone illustrate how to resolve the following errors and allow me to authenticate through the oAuth client ID to return 6 videos from our youtube channel using a search term?
POST 400 (Bad Request)Understand this errorAI cb=gapi.loaded_0?le=scs:169
GET ;fields=kind%2Cname%2Cversion%2CrootUrl%2CservicePath%2Cresources%2Cparameters%2Cmethods%2CbatchPath%2Cid&key=API-KEY 404 (Not Found)
cb=gapi.loaded_0?le=scs:153 Uncaught {error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'} details:"You have created a new client application that uses libraries for user authentication or authorization that are deprecated. New clients must use the new libraries instead. See the Migration Guide for more information." error: "idpiframe_initialization_failed"
// Load the Google API client library
function loadClient() {
import(".js").then(() => {
gapi.load('client', initialize);
}
)}
// Initialize the API client
function initialize() {
gapi.client.init({
'apiKey': 'API-KEY',
'clientId': 'CLIENT-ID.apps.googleusercontent',
'scope': '.readonly',
'discoveryDocs': ['']
}).then(function () {
// Call the API to search for videos
searchVideos('SEARCH-TERM');
});
}
// Search for videos using the YouTube API
function searchVideos(searchTerm) {
return gapi.client.youtube.search.list({
'part': 'snippet',
'q': searchTerm,
'type': 'video',
'maxResults': 6
}).then(function(response) {
displayVideos(response.result.items);
}, function(error) {
console.error('Error: ' + error);
});
}
// Display videos on the WordPress page
function displayVideos(videos) {
const videoContainer = document.getElementById('video-container');
videoContainer.innerHTML = '';
videos.forEach(video => {
const videoElement = document.createElement('iframe');
videoElement.src = '/' + video.id.videoId;
videoElement.width = '300';
videoElement.height = '200';
videoElement.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
videoElement.allowFullscreen = true;
videoContainer.appendChild(videoElement);
});
}
// Load the Google API client library on page load
window.onload = loadClient;// JavaScript Document
<div id="video-container"> </div>