FancyBox and Youtube API events

Question

I'm trying to fire an event once the youtube video that I'm playing into my fancybox is ended.

So I can close automatically the fancybox once the video is over.

I have the last fancybox version and I'm on the youtube API, sticking to exemples but it seems that ytplayer object is "undefined" and I can't make it work properly.

I have read a lot of stuffs on internet including this one, which seems to be good: How make fancybox auto close when youtube video id done?

This is the code I'm using: JsFiddle

$(".fancybox").fancybox({
    'openEffect'  : 'none',
    'closeEffect' : 'none',
    'overlayOpacity' : 0.7,
    'helpers' : {
        media : {}
    },
    'afterLoad' :   function() {
        function onYouTubePlayerReady(playerId) {
            //alert(playerId);
            //alert(document.getElementById("myytplayer"));
            ytplayer = document.getElementById("myytplayer");
            ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
        }

        function onytplayerStateChange(newState) {
            //alert("Player's new state: " + newState);
            if (newState == 0){
                $.fancybox.close(true);
            }
        }
    }
});

// Launch fancyBox on first element
$(".fancybox").eq(0).trigger('click');

If someone get this working, it would be awesome ! I just the video to close the fancybox once it finished !

Thanks a lot

score 2 · Answer 1 · edited Feb 17 '13 at 09:41

Please see following working code (you should use version 2 of fancybox.)

jsfiddle: http://jsfiddle.net/c5h9U/2/

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

// Fires when the player's state changes.
function onPlayerStateChange(event) {
    // Go to the next video after the current one is finished playing
    if (event.data === 0) {
        $.fancybox.close();
    }
}

// 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: {
                            'onReady': onPlayerReady,
                            'onStateChange': onPlayerStateChange
                        }
                    });
                }
            });
    // Launch fancyBox on first element
    $(".fancybox").eq(0).trigger('click');
    });

}

Maybe it is the tips and trick n°17, but it is still working and what I needed. So I say a big YES ! That helped me a lot. Thanks — Brizoo, Feb 15 '13 at 10:21
@JFK Thanks for having me an advise. I'd put a reference when I copy an exact code from there, but I didn't because, — Won, Feb 15 '13 at 18:41
1) It's directly from exact Fancybox's website, and question is about Fancybox. 2) I modified and merged into Brizoo's code. I'm figuring out a manner of SOF, but it was my call by what I think right. You may be a keeper of all manner or not.., I hope you may be. — Won, Feb 15 '13 at 18:47
As well with a little modification it works with the onComplete event of the original FancyBox. — Benjamin, Aug 26 '13 at 22:30

score 0 · Answer 2 · answered May 09 '18 at 19:42

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

FancyBox and Youtube API events

2 Answers2

Linked

Related