I'm a newbie using YouTube API player.
I'm building a chrome extension to work with YouTube's API. In order to use the player, I have created a method in which I make this:
popup.js :
jQuery(document).ready(function()
{
Player();
});
// Creating the player
function Player(){
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '1',
width: '1',
playerVars: {
showinfo: '0',
controls: '0',
autohide: '1',
enablejsapi:'1',
origin:"http://localhost/myapp"
},
events: {
'onReady': IframeReady,
'onStateChange': StateChange
}
});
}
function IframeReady(event) {
player.addEventListener("onStateChange", "StateChange");
player.addEventListener("onError", "PlayerError");
player.setPlaybackQuality('hd720');
gettingInfo();
}
I get the music information (playlits) by using a search function, something like this:
httpReq.open("GET","https://gdata.youtube.com/feeds/api/videos/-/Music/?v=2&alt=json&orderby="+"relevance"+"&start-index="+"1"+"&max-results="+"10"+"&q="+query);
Aforementioned function works perfect! I got the entire playlist. The problem is when I try to play the video action (playlist), the player seems does not work.
By using Inspect function from chrome extension I got this warning:
Failed to load resource chrome-extension://www.youtube.com/iframe_api
I have tried to fix this problem doing the following things:
By putting on manifest file this:
"content_security_policy": "script-src 'self' 'unsafe-eval'; https://www.youtube.com/player_api https://s.ytimg.com/yts/jsbin/www-widgetapi-vfljlXsRD.js; object-src 'self'"
By putting on popup.html this:
<script type="text/javascript" src="//www.youtube.com/iframe_api"></script>
Can anyone tell me please How can I resolve this problem.
Thank you very much.
https://www.youtube.com/iframe_api
. instead of//www.youtube.com/iframe_api
. – Rob Worigin
is set to a localhost URL, while it should have beenlocation.origin
. – Rob W