Hello,
I have added the following code to template onRendered. The following creates an script tag and inserts it into the dom to load the javascript code for the youtube player api.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
The Youtube API will call the following function when the video player is ready, the function is called but
on local env Template.instance() is undefined there.
window.onYouTubeIframeAPIReady = function() {
console.log('onYouTubeIframeAPIReady');
new YT.Player('player', {
height: '390',
width: '640',
videoId: '4GMU08J98MQ',
playerVars: {
'color': 'white',
'modestbranding': 1,
'controls': 0,
'origin': Meteor.absoluteUrl()
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
console.log('Template', Template.instance()); //Returns undefined
}
I also call a Meteor method to get documents from a collection at template onRendered, locally the Meteor method resolves before the onYouTubeIframeAPIReady function.
instance.state.set({ isLoading: true });
getSongsByPage.call(
{},
(err, result) => {
if (result) {
instance.state.set({
isLoading: false,
songs: result.songs
});
}
}
);
I don’t know which one is going to resolve first, the onYouTubeIframeAPIReady function or the Meteor method.
I need both to be resolve so I can create the youtube players.
I have no idea how to sync them, the player api is outside meteor system.
How can I trigger a function call when both are done?
Thanks,