Magnific Popup: error trying to invoke a YouTube iframe popup from an inline popup

Question

I'm using Magnific Popup to show an inline modal with an image and some text. The client now wants to add a link inside this inline modal to watch a video - with this video being inside a new modal popup.

We are using the video modal throughout the site already without any problems, however when the link is inside the inline modal the black overlay stays, the inline modal goes away as expected, but no video modal appears.

<a class="modal-youtube" href="https://www.youtube.com/watch?v=5r15IUNWhl8">Watch a Video</a>

In the console it has this error:

Error: Syntax error, unrecognized expression: https://www.youtube.com/watch?v=5r15IUNWhl8

For reference, here's my javascript code - it's all pretty standard stuff from the docs, though.

$('.modal-youtube, .modal-vimeo, .modal-gmaps').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,

    fixedContentPos: false
});



$('.modal').magnificPopup({
        type: 'inline',
        preloader: false,
        showCloseBtn: true
  });

It sounds like Magnific Popup is having trouble rebuilding the YouTube link to create the iframe, but I have no idea why it works everywhere else except for inside a modal window. Any ideas?

Answer 1

I'm brand new to magnific-popup, and I'm experiencing the same issue: my youtube src doesn't build correctly. I'm not launching the popup through an <a> tag, but rather on a <div>. I may not be addressing your situation, but here's my workaround idea for you. I'm not crazy about it, but it worked.

// store the youtube url in a data- attribute as I build my page
$(section_item).data("yt",thisLink);

//section_item is my <div> where the magnific-popup spawns from
 $(section_item).magnificPopup({
      items:{
           src:$(section_item).data("yt")
      },
      type:'iframe',
      callbacks:{
           open:function({
                $("iframe").attr("src",$.magnificPopup.instance.currItem.src);
           }
      },
});

I was seeing a broken youtube src:

file://www.youtube.com/embed/ttps://www.youtube.com/embed/-fuulLKmxxg?autoplay=1

The open callback is where I forced the src to be corrected, where it's chopped down, recalling it from currItem.src:

https://www.youtube.com/embed/-fuulLKmxxg

I tried playing with the patterns object, in the documentation, but I couldn't get that to work. Hope this was a little helpful.