CODEWITHSUNDEEP
javascriptjqueryyoutube
Pete
Pete

Reputation: 532

YouTube API - onPlayerStateChange

I'm using the YouTube API in conjunction with Cyclone Slider. The goal is to pause the slideshow once the YouTube starts playing. I'm using the following code which works nicely:

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

<script>
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
}

function onPlayerStateChange(event) {
    if(event.data === 1) {
        $(".cycle-slideshow").cycle('pause');
    }

    if(event.data === 2) {
        $(".cycle-slideshow").cycle('resume');
    }
}
</script>

However, it only seems to work if I do a refresh of the page. If I navigate between pages and return to the homepage, it will no longer work.

Any suggestions for why this is the case? I've tried a few suggestions I found on Google but couldn't get any to work. I'm a little lost on this one.

Any help would be greatly appreciated.

Upvotes: 3

Views: 8508

Answers (1)

Zafar Ahmad
Zafar Ahmad

Reputation: 428

Try the following code, it works for me - 

function loadYouTube(targetId){
    ytplayer = new YT.Player(targetId, {
        events: {
            'onStateChange': function(event){
                /** YouTube API
                        -1 (unstarted)
                        0 (ended)
                        1 (playing)
                        2 (paused)
                        3 (buffering)
                        5 (video cued)
                 **/
                if (event.data == 1) {
//do your work here
                }
                console.log(event.data)
            }
        }    
    });
}

Upvotes: 1

Related Questions