How can I get magnific popup to show both images and an iframe video in one dynamic gallery?

Question

I am using magnific popup to create an image gallery via the below:

$('.main-content').magnificPopup({
  delegate: '.gallery', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery: {enabled:true}
  // other options
});

I also have a video embed using the below:

$('.video').magnificPopup({
    type: 'iframe',
    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: {
        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: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe. 
        },
        vimeo: {
          index: 'vimeo.com/',
          id: '/',
          src: '//player.vimeo.com/video/%id%?autoplay=1'
        },
        gmaps: {
          index: '//maps.google.',
          src: '%id%&output=embed'
        }

        // you may add here more sources

      },

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

});

How can I merge the video iframe into the gallery? I cannot use the items array because my images and videos are dynamic.

Thanks

Answer 1

Here is a simple solution I've used for this:

$('.image-link, .video-link').magnificPopup({
    callbacks: {
      elementParse: function(item) {
         // the class name
         if(item.el.context.className == 'video-link') {
           item.type = 'iframe';
         } else {
           item.type = 'image';
         }
      }
    },
    gallery:{enabled:true},
    type: 'image',
});

It should work with type formatters.