BackboneJS How to load Youtube Iframe in view

Question

I have a Backbone App where I have a View in which I want to display a youtube player:

so in my View, in afterRender - I did this:

afterRender: function() {
              var tag = document.createElement('script');

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


              var player;
              function onYouTubeIframeAPIReady() {
                player = new YT.Player('vid', {
                  height: '390',
                  width: '640',
                  videoId: '',
                  events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                  }
                });
              }

              function onPlayerReady(event) {
                event.target.playVideo();
              }

              var done = false;
              function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                  setTimeout(stopVideo, 6000);
                  done = true;
                }
              }
              function stopVideo() {
                player.stopVideo();
              }
}

But its not rendering anything but I also dont get errors and in my console I can see that Youtube API is loaded... So what am I doing wrong here?

Please help..

Answer 1

By changing

function onYouTubeIframeAPIReady() {
 // ...
}

into

window.onYouTubeIframeAPIReady = function() {
 // ...
}

It now works! Found the clue here Youtube iframe api not triggering onYouTubeIframeAPIReady

Answer 2

See this related question: Youtube iframe api not triggering onYouTubeIframeAPIReady

I think the problem is that your onYouTubeIframeAPIReady function needs to be declared globally, not nested inside another function. (In your code, it's only defined within the scope of the afterRender method.)