I've incorporated the code documented in the following article into a new component:
Play YouTube Videos Through Lightning Web Components
It seems like the two JS files referenced, iframe_api.js and widgetapi.js, don't always load when the component is first loaded. In other words, initially the embedded YouTube player craps out the very first time I load the component. Afterwards, the resources load fine. This is true even when I clear my Chrome cache--which seems odd to me since this would force my browser client to refetch the static resource from the org.
I thought that the use of the Promise.all()
to encapsulate the two loadScript()
calls would ensure that both JS resources are loaded before continuing, but in my experience, that is not the case.
renderedCallback() {
.
.
.
if (window.YT) {
if (this.player) {
this.player.cueVideoById(this.youTubeId);
} else {
this.onYouTubeIframeAPIReady();
}
} else {
Promise.all([
loadScript(this, YouTubePath + '/iframe_api.js'),
loadScript(this, YouTubePath + '/widgetapi.js')
])
.then(() => {
this.onYouTubeIframeAPIReady();
})
.catch(error => {
console.log('Error with loading the YouTube static resources');
console.log(JSON.stringify(error));
this.showErrorToast(error);
});
}
}
I've tried splitting the two JS files into their own individual static resources, but the same problem happens.
Is there another way I can address this issue?