CODEWITHSUNDEEP
androidcordovayoutubeyoutube-iframe-api
justahandsomeman
justahandsomeman

Reputation: 31

Cordova/Phonegap YouTube iframe_api error: XMLHttpRequest cannot load chrome-extension Cross origin requests are only supported for HTTP

I am trying to use the a YouTube iframe API with my cordova-android project. When I run the code in a browser on my computer it runs perfectly, but when i build my app and run it on my phone the page containing the iframe will not load, and i get the following error in my console:

XMLHttpRequest cannot load chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js. Cross origin requests are only supported for HTTP

Here is my code:

 <div class='ui-body ui-body-a'>
       <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
       <div id="player"></div>

       <script>
           // 2. This code loads the IFrame Player API code asynchronously.
           var tag = document.createElement('script');

           tag.src = "https://www.youtube.com/iframe_api";
           var firstScriptTag = document.getElementsByTagName('script')[0];
           firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

           // 3. This function creates an <iframe> (and YouTube player)
           //    after the API code downloads.
           var player;
           function onYouTubeIframeAPIReady() {
               player = new YT.Player('player', {
                   height: '390',
                   width: '640',
                   videoId: 'M7lc1UVf-VE',
                   events: {
                       'onReady': onPlayerReady,
                       'onStateChange': onPlayerStateChange
                   }
               });
           }

           // 4. The API will call this function when the video player is ready.
           function onPlayerReady(event) {
               console.log('Loaded Video)
           }

          // 5. The API calls this function when the player's state changes.
          //    The function indicates that when playing a video (state=1),
          //    the player should play for six seconds and then stop.
          var done = false;
          function onPlayerStateChange(event) {
              if (event.data == YT.PlayerState.PLAYING && !done) {
                  setTimeout(stopVideo, 6000);
                  done = true;
              }
          }
          function stopVideo() {
              player.stopVideo();
          }
    </script>
</div>

Thanks in advance!

Upvotes: 2

Views: 599

Answers (1)

justahandsomeman
justahandsomeman

Reputation: 31

I got it to work by using glitchbone's cordova plugin YoutubeVideoPlayer.

Upvotes: 0

Related Questions