YouTube onPlayerStateChange not firing

Question

I am loading the YouTube player API as follows and I'm trying to fire an event once the youtube video that I'm playing into my fancybox is ended.and show one pop up.

this the code i found and tried but event is not firing

<!doctype html>
<html lang="en">
<body>
<a class="fancybox fancybox.iframe" id="vdo" href="http://www.youtube.com/embed?listType=playlist&list=PL590L5WQmH8f_0qlZ-tKrtbfw4n0jyHQ">Video #1</a>


<script>
// Fires whenever a player has finished loading
function onPlayerReady(event) {
    event.target.playVideo();
}

// Fires when the player's state changes.
count = 0;
        function onPlayerStateChange(event) {
            if(event.data == 0)
            {
                count++;
            }           
            if(count == 6)
            {
                $("#popup-wrapper-center").show();
            }
        }

// The API will call this function when the page has finished downloading the JavaScript for the player API
function onYouTubePlayerAPIReady() {

    // Initialise the fancyBox after the DOM is loaded
    $(document).ready(function() {
        $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                nextEffect  : 'none',
                prevEffect  : 'none',
                padding     : 0,
                margin      : 50,
                beforeShow  : function() {
                    // Find the iframe ID
                    var id = $.fancybox.inner.find('iframe').attr('id');

                    // Create video player object and add event listeners
                    var player = new YT.Player(id, {
                        events: {

                            'onStateChange': onPlayerStateChange
                        }
                    });
                }
            });


    });

}
</script>
</body>
</html>

http://stackoverflow.com/questions/14880803/fancybox-and-youtube-api-events — Ellis, Jun 05 '15 at 12:42

score 2 · Answer 1 · answered Jun 05 '15 at 12:31

2

change the id to video instead of vdo

answered Jun 05 '15 at 12:31

viewers.gq

21
8

Possible causes: - Testing "locally" (loading the file without going through http://localhost) - Mixing Embed API (where you declare an iframe) with iframe API (where you declare a DIV and load some JS). The events only seem to work with the latter. - ID on the DIV does not match ID on new YT.Player(...) call – Alex R May 09 '18 at 19:43

YouTube onPlayerStateChange not firing

1 Answers1