BackboneJS - Magnific popup not firing youtube video

Question

I want to show youtube videos in the Magnific popup http://dimsemenov.com/plugins/magnific-popup/. The URl for the youtube video I get from a JSON file which I insert in my HTML with HandlebarsJS. So far so good, when I check the <a href> with the webinspector, the correct link is available.

Somehow though, when I click on it, the Magnific popup opens, but the youtube video is not firing, instead I get an error message. It seems like as soon the popup opens, or rather, when Magnific popup gets triggered, it completely disattaches itself from my BackboneJS App. Can this be true?

In my HTML (video.html) I have:

<a class="vidPopup" href="youtubelink here">

and in the Backbone View i created event:

    template: 'video', //referring to the video.html
    events: {
        'click .vidPopup': 'seeVid'
    },

    seeVid: function(e) {
        e.preventDefault();
        $('.vidPopup').magnificPopup({
            disableOn: 700,
            type: 'iframe',
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
        });
    }

What could be the issue here?

Answer 1

I solved it myself! Since the Youtube API returns the ID of the youtube video I just had to do this:

<a class="vidPopup" href="https://www.youtube.com/watch?v={{id}}">

I didnt have to change the popup settings