I'm trying to build a Chrome extension to show a Youtube video using Youtube's iframe API. However, the player's OnReady event never fires. From previous posts here I gather this is due to the fact that Youtube cannot access the player because it is a local instantiation.
I wonder: is there a way to make this work?
My code instantiates the player in a popup. I want to play new videos to the player by passing the video ID to the player's loadVideoById function. Here's the code of my player (in a file called 'youtube.js'):
function loadPlayer() {
var popups = chrome.extension.getViews({type: "popup"});
if (popups.length != 0) {
var popup = popups[0];
console.log("Popup found, starting to load the player...");
var tag = popup.document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = popup.document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
console.log("Finished loading the player.");
}
}
The onYouTubeIframeAPIReady function is as below:
function onYouTubeIframeAPIReady() {
console.log("Starting to instantiate the player...");
var popups = chrome.extension.getViews({type: "popup"});
if (popups.length != 0) {
var popup = popups[0];
popup.document.ytplayer = new YT.Player('player', {
height: '200',
width: '300',
videoId: 'V4n6OjoPuJc',
playerVars: {
origin: 'location.origin',
showinfo: 0,
controls: 1,
playsinline: 1,
autoplay: 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
})
};
console.log("Player element created.");
console.log(popup.document.ytplayer);
}
The popup.html file has a div for the player:
<div id="player"></div>
The player should have sufficient rights. The security policy included in the manifest.json file:
"content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api https://s.ytimg.com/yts/jsbin/www-widgetapi-vfldKI4RW.js https://s.ytimg.com/yts/jsbin/www-widgetapi-vflgGL-5Q.js; object-src 'self'",
The player instantiates fine, and is able to play the initial videoId that I hardcode. However, the player's OnReady event does not seem to fire. Also, the majority of the API's functionality is unusable (i.e. returns errors like "TypeError: Object # has no method 'loadVideoById'" if I try to pass new videoIds) for the player created. From previous posts I gather that these problems have one and the same origin: the inability for Youtube to communicate with my player because it has no associated domain.
Is there a way to do this? If so, what am I doing wrong? Thanks a lot beforehand!
There are several related posts available; however, these are players for web html that do have their own domain (if that is the correct way of expressing it), which is not the case for a Chrome extension. YouTube API onPlayerReady not firing Youtube Embed Iframe - Events Not Firing In Local
There is one other related post, but that does not present an issue for this specific problem. Youtube API player chrome extension
