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..

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

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.)

edited May 23 '17 at 11:59

Community

1
1

answered May 06 '14 at 10:58

gmcnaughton

2,233
1
21
28

score 1 · Accepted Answer · edited May 23 '17 at 10:27

1

By changing

function onYouTubeIframeAPIReady() {
 // ...
}

into

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

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

edited May 23 '17 at 10:27

Community

1
1

answered May 06 '14 at 11:11

SHT

700
4
18
39

BackboneJS How to load Youtube Iframe in view

2 Answers2