1
votes

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:

  1. 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'"
    
  2. 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.

Use https://www.youtube.com/iframe_api. instead of //www.youtube.com/iframe_api.Rob W
Hi Rob Thanks for the tip. Now I have the following mistake: "Refused to load the script 'youtube.com/iframe_api' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:" could you tell me plase, how can I resolve it?user1069571
I have modified the content security policy on manifest.json, by putting this: "content_security_policy": "script-src 'self' youtube.com/player_api; object-src 'self'" PD: includes "https" before youtube.com but it does not seem to work for meuser1069571
I was pointing to your popup.html file. I believe that your code also has a proble, because origin is set to a localhost URL, while it should have been location.origin.Rob W
@Rob we have Combine them ("youtube.com/iframe_api and "s.ytimg.com/yts/jsbin/www-widgetapi-vfljlXsRD.js) into one script-> "pastebin.com/TM1bbsje and we have include it into our content scripts.But just now we have the following mistake Blocked a frame with origin "youtube.com" from accessing a frame with origin "chrome-extension://ssxxxxxx". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "chrome-extension". Protocols must match. see the line number 672 of aforementioned file(pastebin).user1069571