Instagram Feed with Iframe

[sododesign]

Hi guys,

Is Possible get a small help with the integration of magnificent popup with Instagram? I have this situation:

// POPUP VIDEO WITH INSTAGRAM
      $('.popup-instagram-mf').magnificPopup({
        disableOn: 0,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,

        fixedContentPos: false,
        iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
                  '<div class="mfp-close"></div>'+
                  '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button

        patterns: {
          instagram: {
            index: 'instagram.com/',
            id: '/',
            src: '//instagram.com/p/%id%/embed/'
          }

        },

        srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
      }
      }); // END INSTAGRAM MAGNIFIC POPUP

My HTML:

<a class="open-popup-link event-music popup-instagram-mf" href="https://www.instagram.com/p/BR0XwRYAiQU/?taken-by=goweddy">My Text</a>

[eballeste]

yup

const markup = `<div class="mfp-iframe-container">
     <div class="mfp-close"></div>
     <iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>
   </div>`;

$('.popup-instagram-mf').magnificPopup({
  type: iframe,
  iframe: {
    markup,
    patterns: {
      instagram: {
        index: 'instagram.com',
        id: url => {
          const m = url.match(/(?:https?:\/\/(?:www\.)?)?instagram\.com\/p\/(\w+)/);
          if (!m || !m[1]) {
            return null;
          }

          return m[1];
        },
        src: '//instagram.com/p/%id%/embed/',
      },
      ...
    },
  },
  ...
});

mfp-iframe-scaler by default has a 16*9 aspect ratio which is why i'm using my own markup