Magnific-popup: Setting options for YouTube video won't take effect

Created on 20 Feb 2014  路  3Comments  路  Source: dimsemenov/Magnific-Popup

I'm struggling to add options to Youtube videos like rel=0. Noticed that autoplay won't work too. I've done what the docs say, but saw no change. In fact, if I mistype the src, the video still plays so it looks like the options set in my js are not being used. (I'm using v0.9.9).

$('.test-popup-link').magnificPopup({ 
        type: 'iframe',
        iframe: {
            markup: '<div class="mfp-iframe-scaler">'+
                        '<div class="mfp-close"></div>'+
                        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                        '<div class="mfp-title">Some caption</div>'+
                      '</div>'
            },
            patterns: {
                 youtube: {
                    index: 'youtube.com/', 
                    id: 'v=',
                    src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=1'
                 }
            }
        // other options
    });

Here, in the JSfiddle, everything works perfectly (as in my dev environment): http://jsfiddle.net/landitus/7NG7K/3/

Note that in the fiddle, the patterns option can be misspelled and the video still works. I'm I doing something wrong?

In the live site, which has a different jquery version btw, both autoplay and the rel attribute won't take effect.

Most helpful comment

You have brace errors in your script:

$('#test-popup-link').magnificPopup({ 
    type: 'iframe',
    iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
            '<div class="mfp-title">Some caption</div>'+
            '</div>',
        patterns: {
            youtube: {
                index: 'youtube.com/', 
                id: 'v=',
                src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
            }
        }
    }
    // other options
});

All 3 comments

I have the same problem. With the latest version of the plugin (installed with Bower), and jQuery 2.1.0, all my iframe options are ignored.

You have brace errors in your script:

$('#test-popup-link').magnificPopup({ 
    type: 'iframe',
    iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
            '<div class="mfp-title">Some caption</div>'+
            '</div>',
        patterns: {
            youtube: {
                index: 'youtube.com/', 
                id: 'v=',
                src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
            }
        }
    }
    // other options
});

@sglessard It's working now. Thank you very much!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tillilab picture tillilab  路  4Comments

vdotm picture vdotm  路  5Comments

apasho picture apasho  路  4Comments

BorislavZlatanov picture BorislavZlatanov  路  4Comments

softshape picture softshape  路  4Comments