Magnific-popup: youtube link on magnific popup is not autoplaying

[vdotm]

On clicking the link the popup shows up with video - but does not autoplay it. Plays only on clicking again the popped up youtube button. I tried with different options for autoplay. Any help would be much appreciated!

This is the
link

<a href="https://www.youtube.com/watch?v=8Shndkrgc88" class="video" >

With this script

$('.popup-gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
        callbacks: {
          elementParse: function(item) {
            // Function will fire for each target element
            // "item.el" is a target DOM element (if present)
            // "item.src" is a source that you may modify
            // console.log(item.el.context.className);
            if(item.el[0].className == 'video') {
              item.type = 'iframe',
              item.iframe = {
                 patterns: {
                   youtube: {
                     index: 'youtube.com/', 
                     id: 'v=', 
                     src: '//www.youtube.com/embed/%id%?autoplay=1&mute=1' 
                   },
                   vimeo: {
                     index: 'vimeo.com/',
                     id: '/',
                     src: '//player.vimeo.com/video/%id%?autoplay=1'
                   },
                   gmaps: {
                     index: '//maps.google.',
                     src: '%id%&output=embed'
                   }
                 }
              }
            } else {
               item.type = 'image',
               item.tLoading = 'Loading image #%curr%...',
               item.mainClass = 'mfp-img-mobile',
               item.image = {
                 tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
               }
            }

          }
        },
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1] // Will preload 0 - before current, and 1 after the current image
            }

        });`

[sivasankarankb]

Changing this :

https://github.com/dimsemenov/Magnific-Popup/blob/c8f6b8549ebff2306c5f1179c9d112308185fe2c/src/js/iframe.js#L27

To this worked for me:

'<iframe class="mfp-iframe" src="//about:blank" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'+

This should also be OK:

'<iframe class="mfp-iframe" src="//about:blank" frameborder="0" allow="autoplay" allowfullscreen></iframe>'+

(YouTube embed code comes with the first version.)

Also had to change this:

https://github.com/dimsemenov/Magnific-Popup/blob/c8f6b8549ebff2306c5f1179c9d112308185fe2c/src/js/iframe.js#L37

to this:

src: 'https://www.youtube.com/embed/%id%?autoplay=1'

[sivasankarankb]

I didn't edit that file, but /dist/jquery.magnific-popup.js.

Here:

https://github.com/dimsemenov/Magnific-Popup/blob/c8f6b8549ebff2306c5f1179c9d112308185fe2c/dist/jquery.magnific-popup.js#L1574

and here:

https://github.com/dimsemenov/Magnific-Popup/blob/c8f6b8549ebff2306c5f1179c9d112308185fe2c/dist/jquery.magnific-popup.js#L1584

But this file is probably generated from /src/js/iframe.js.

[apmeyer]

You shouldn't need to edit any core files. I found that in addition to including options to reformat the URL, you also need to include the option to modify the iframe markup. Make sure to include allow="autoplay" on the opening iframe tag.

{
    type: 'iframe',
    iframe: {
        markup: '<div class="mfp-iframe-scaler">' +
            '<div class="mfp-close"></div>' +
            '<iframe class="mfp-iframe" frameborder="0" allow="autoplay"></iframe>' +
            '</div>',
        patterns: {
            youtube: {
                index: 'youtube.com/',
                id: 'v=',
                src: 'https://www.youtube.com/embed/%id%?autoplay=1'
            }
        }
    }
}

[sivasankarankb]

Isn't this something that should be done by magnific popup automatically?

[geraldo]

The solution from @apmeyer works perfectly. Even so I would like to know why the "Open YouTube video" example on Magnific-Popup homepage works without the iframe markup and patterns.