In my attempt to implement a search using the YouTube Data API, I have come up with the following code. The setup involves an express generated stack with jade.
#player
script.
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '345',
width: '540',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function googleApiClientReady() {
gapi.client.setApiKey('AIzaSyCgOmTzCI4-gkUhL4hOm9R6I9tmUlVqtCw');
gapi.client.load('youtube', 'v3', function() {
/**
* This function searches for videos related to the keyword 'dogs'. The video IDs and titles
* of the search results are logged to Apps Script's log.
*
* Note that this sample limits the results to 25. To return more results, pass
* additional parameters as documented here:
* https://developers.google.com/youtube/v3/docs/search/list
*/
function searchByKeyword() {
var results = YouTube.Search.list('id,snippet', {q: 'dogs', maxResults: 25});
for(var i in results.items) {
var item = results.items[i];
console.log('[%s] Title: %s', item.id.videoId, item.snippet.title);
}
}
searchByKeyword();
});
}
script(src="https://apis.google.com/js/client.js?onload=googleApiClientReady")`
Based on the code provided, the expected behavior is to load a video initially, followed by executing a search for 'dogs' and printing the results to the console.
Despite these intentions, an error message pops up:
ReferenceError: YouTube is not definedThe cause of this issue eludes me completely...perhaps something regarding the loading of the script...even after multiple attempts at placing it appropriately. Any guidance would be greatly appreciated.
UPDATE
I moved the script( back to the end - similar to how it was in the original code...and now I can confirm that the searchByKeyword method is indeed running. However, the problem has circled back to the initial YouTube is not defined problem. In the following excerpt, you'll find the output from my console.log message inserted at the start of the searchByKeyword method, along with the recurring error mentioned earlier:
searchByKeyword is running
ReferenceError: YouTube is not defined