I have delegated to $(document) a click method for a dynamically-added element with a class of .popup-youtube. the only thing is, i just can't get the popup to work properly.

Here's my script:

$(this).on("click", ".popup-youtube", function(e){

        // prevent default action
        e.preventDefault();

        $(this).magnificPopup({
            type: 'iframe',
            iframe: {
                markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe 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/', // 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%
                        // Or null - full URL will be returned
                        // Or a function that should return %id%, for example:
                        // id: function(url) { return 'parsed id'; }
                        src: '//www.youtube/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
                    },
                    vimeo: {
                        index: 'vimeo/',
                        id: '/',
                        src: '//player.vimeo/video/%id%?autoplay=1'
                    },
                    gmaps: {
                        index: '//maps.google.',
                        src: '%id%&output=embed'
                    }
                },
                srcAction: 'iframe_src'
            }
        });
    });

Anyone have any tips on this? your help would gladly be appreciated.

I have delegated to $(document) a click method for a dynamically-added element with a class of .popup-youtube. the only thing is, i just can't get the popup to work properly.

Here's my script:

$(this).on("click", ".popup-youtube", function(e){

        // prevent default action
        e.preventDefault();

        $(this).magnificPopup({
            type: 'iframe',
            iframe: {
                markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe 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./', // 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%
                        // Or null - full URL will be returned
                        // Or a function that should return %id%, for example:
                        // id: function(url) { return 'parsed id'; }
                        src: '//www.youtube./embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
                    },
                    vimeo: {
                        index: 'vimeo./',
                        id: '/',
                        src: '//player.vimeo./video/%id%?autoplay=1'
                    },
                    gmaps: {
                        index: '//maps.google.',
                        src: '%id%&output=embed'
                    }
                },
                srcAction: 'iframe_src'
            }
        });
    });

Anyone have any tips on this? your help would gladly be appreciated.

• javascript
• jquery
• magnific-popup

• Change it from $(this).on("click", ".popup-youtube" to $(document).on("click", ".popup-youtube" – Rob Schmuecker Commented Jul 30, 2014 at 8:53
• I've tried it @RobSchmuecker. unfortunately, it doesn't work. – Kyle Emmanuel Commented Jul 30, 2014 at 8:55

1 Answer 1

Try this - chaining the open method after you are initialising the popup

$(document).on("click", ".popup-youtube", function(e){

        // prevent default action
        e.preventDefault();

        $(this).magnificPopup({
            type: 'iframe',
            iframe: {
                markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe 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./', // 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%
                        // Or null - full URL will be returned
                        // Or a function that should return %id%, for example:
                        // id: function(url) { return 'parsed id'; }
                        src: '//www.youtube./embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
                    },
                    vimeo: {
                        index: 'vimeo./',
                        id: '/',
                        src: '//player.vimeo./video/%id%?autoplay=1'
                    },
                    gmaps: {
                        index: '//maps.google.',
                        src: '%id%&output=embed'
                    }
                },
                srcAction: 'iframe_src'
            }
        }).magnificPopup('open');
    });