jQuery(document).ready(function($) {
    $('.owl-wrapper').magnificPopup({
            delegate: 'a',
            type: 'image',
            tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1]
            },
            image: {
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            },
            callbacks: {
                elementParse: function(item) {
         if(item.el.context.className == 'video-link') {
             item.type = 'iframe';
         } else if(item.el.context.className == 'inline-link') {
            item.type = 'inline';
         } else {
             item.type = 'image';
         }
                }
            },
    });
});

You are able to define the type ofa gallery item using the mfp-TYPE CSS class. So in this case you would add mfp-iframe to the anchor tag pointing to your video and the plugin will handle the rest.

HTML:

<div class="gallery">
  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-1.jpg">
     <img src="https://www.example.com/image-thumbnail-1.jpg" alt="">
  </a>

  <!-- Video item with mfp-iframe class -->
  <a href="https://www.example.com/video-url" class="mfp-iframe">
     <img src="https://www.example.com/video-thumbnail.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-2.jpg">
     <img src="https://www.example.com/image-thumbnail-2.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-3.jpg">
     <img src="https://www.example.com/image-thumbnail-3.jpg" alt="">
  </a>
</div>

JS:

$('.gallery').magnificPopup(
        {
            delegate: 'a',
            type: 'image',
            tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1] // Will preload 0 - before current, and 1 after the current image
            },
            image: {
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                titleSrc: function(item) {
                    return '';
                }
            }
        }
    );

More information can be found in the documentation:

http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types