当youtube视频完成时如何显示magnific-popup

Question

我需要在youtube视频完成后显示一个弹出窗口，它可以正常运行alert（）但是当我尝试制作夸张的弹出窗口而不是警报时它不起作用是我的代码

<script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

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

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
        height: '600',
        width: '600',
        videoId: 'id',
        playerVars: { 'autoplay':"0", 'controls':"1" },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
        });
    }

    var playerReady = false;
    function onPlayerReady(event) {
        playerReady = true;
    }
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED ) {            

  $.magnificPopup.open({
        items: {
            src: 'mylink to the pic'
        },
        type: 'image'

      // You may add options here, they're exactly the same as for $.fn.magnificPopup call
      // Note that some settings that rely on click event (like disableOn or midClick) will not work here
    }, 0);  }
    }
</script>