Magnific popup autoplay youtube video

gistfile1.txt

<a href="https://www.youtube.com/watch?v=ZNr5KdZNThQ" class="btn play-video youtube">Play</a>

$( '.banner .play-video.youtube' ).magnificPopup( {
    type: 'iframe',
    iframe: {
      markup: '<div class="mfp-iframe-scaler">'+
              '<div class="mfp-close"></div>'+
              '<iframe class="mfp-iframe" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>'+
              '</div>',
      patterns: {
        youtube: {
          index: 'youtube.com/', // 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: 'https://www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
        }
      },
      srcAction: 'iframe_src',
    }
  } );