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.

[joeydi]

Not sure exactly when this changed, but in Chrome v96 the @apmeyer solution above, as well as the video examples on the Magnific Popup homepage no longer work:

[Rupashdas]

just add this "mfp-iframe" css class in the trigger button. for example: <a href="https://www.youtube.com/watch?v=pVE92TNDwUk" class="mfp-iframe transparent-link">WATCH VIDEO</a>

As you can see in the anchor I have added the class name in the class list. And "Booooom"

[bunthoeunstable]

add params mute=1 it's work for me ?autoplay=1&mute=1

[MateuszDziadek]

<script>
$(document).ready(function() {
        $('.popup-youtube').magnificPopup({
            type: 'iframe',
            iframe: {
                markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen allow="autoplay *; fullscreen *"></iframe>'+
                    '</div>',
                patterns: {
                    youtube: {
                        index: 'youtube.com/',
                        id: function(url) {
                            var m = url.match(/[\\?\\&]v=([^\\?\\&]+)/);
                            if ( !m || !m[1] ) return null;
                            return m[1];
                        },
                        src: '//www.youtube.com/embed/%id%?autoplay=1&iframe=true'
                    },
                    vimeo: {
                        index: 'vimeo.com/',
                        id: function(url) {
                            var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/);
                            if ( !m || !m[5] ) return null;
                            return m[5];
                        },
                        src: '//player.vimeo.com/video/%id%?autoplay=1'
                    }
                }
            }
        });
    });
</script>

HTML: 
        <a class="popup-youtube mfp-iframe" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>