youtube link on magnific popup is not autoplaying

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
    		}
        
    	});`

[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]

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'