Detect end of YouTube video in Magnific Popup

Question

How can one detect the end of a YouTube video playing inside of a magnific popup? The only events provided are for open and close the popup. Can the iframe or js api from YouTube be used somehow to accomplish this using onPlayerStateChange === 0?

I need to trigger javascript to display a continue button on video end so the user can continue to the next segment.

Answer 1

To those who are looking for GA event GetCurrentTime

I was looking for the time of current video playing but with magnificPopup it is quite difficult to find. I had an error of 'player.getCurrentTime()' not a function or undefined. By seeing different codes I probably mixed it up.

Then i tried to initiate the object with a variable declared outside the object and it worked. Therefore the object must be declared into an external variable and then inside the object definition you can access its methods.

                var ytplayer
                $('.js-popup-video').magnificPopup({
                    type: 'iframe',
                    iframe: {
                        markup: '<div class="mfp-iframe-scaler">'+
                            '<div class="mfp-close"></div>'+
                            '<iframe id="ytplayer" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                            '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
                        patterns: {
                            youtube: {
                                index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
                                id: 'v=', // String that splits URL in a two parts, second part should be %id%
                                src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1&enablejsapi=1' // URL that will be set as a source for iframe.
                            }
                        },
                        srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
                    },
                    callbacks: {
                        open: function() {
                           var ytplayer = new YT.Player('ytplayer', {
                                events: {
                                    'onStateChange': function onPlayerStateChange(event) {

                                        if (event.data == YT.PlayerState.PLAYING) {
                                            console.log('PLAYING')
                                        }

                                        // track when user clicks to Pause
                                        if (event.data == YT.PlayerState.PAUSED) {
                                            console.log('PAUSED')
                                            console.log(ytplayer.getCurrentTime())
                                        }

                                        // track when video ends
                                        if (event.data == YT.PlayerState.ENDED) {
                                            console.log('ENDED')
                                        }
                                    }
                                }
                            })
                        }
                    },
                    mainClass: 'mfp-anim-in'
                });

Answer 2

Legal thanks, a hint that uses music player jPlayer and want to pause the music while play in the video and after the video ends the music back to play from where you left here is the contribution to amplify this solution

function onPlayerStateChange(event) {
           $("#jquery_jplayer_1").jPlayer("pause");
            if (event.data == YT.PlayerState.ENDED) {
                 $.magnificPopup.close();
                $("#jquery_jplayer_1").jPlayer("play");
            }
        }

Answer 3

To elaborate on the great solution above. You can include the "player" id as well as the enablejsapi both by extending the iframe markup option without editing core code from magnificPopup

$('#play').magnificPopup({
    type:'iframe',
    iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
        '<div class="mfp-close"></div>'+
        '<iframe id="player" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
        '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
        patterns: {
            youtube: {
                index: 'youtube.com/',
                id: 'v=',
                src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1&enablejsapi=1'
            }
        },
        srcAction: 'iframe_src',
    },
    callbacks: {
      open: function () {
        new YT.Player('player', {
          events: {
            'onStateChange': onPlayerStateChange
           }
        });
      }
    },
    midClick: true,
    closeOnBgClick: false,
    removalDelay: 500,
    mainClass: 'mfp-fade mfp-video',
});

Answer 4

http://jsfiddle.net/sjvc_phil/s7432z8L/

1. Make sure you include the youtube iframe api

   <script src="//www.youtube.com/iframe_api"></script>
   

2. You need to modify the Magnific Popup iFrame code a bit. The mark up needs to include id="player" next to class="mfp-iframe". This lets the YouTube API know which video you want to monitor. You will also need to a the parameter &enablejsapi=1 in the youtube url after the ?autoplay=1 parameter.

3. The magic is in the Magnific Popup callback.

   callbacks: {
     open: function () {
       new YT.Player('player', {
         events: {
           'onStateChange': onPlayerStateChange
          }
       });
     }
   }
   

   And the function that closes Magnific Popup when the video ends:

   function onPlayerStateChange(event) {
       if (event.data == YT.PlayerState.ENDED) {
           $.magnificPopup.close();
       }
   }