Using Magnific Popup plugin for video & getting strange results

Hi! I’m trying to use the built-in Magnific script to pop up a video, as per this post/thread:

In my HTML module I have this:

<a id="fl-homepage-video" href=""><img src="/wp-content/uploads/2015/08/RideResponsibly.png" /></a>
<script type="text/javascript">
jQuery( function(){
    jQuery( '#fl-homepage-video' ).magnificPopup({
        type: 'iframe',
        mainClass: 'mfp-fade',
        fixedContentPos: false

The URL works by itself. However, when I publish my page the image link doesn’t work. Upon examining the code it’s rendering THIS as a link:

<iframe frameborder="0" allowfullscreen="" src="//" class="mfp-iframe"></iframe>

As you can see, the URL is messes up… I’ve tried a few times and each time the src renders a messed up URL.

Any ideas what I’m doing wrong, or is there a bug in the script?

Hey Jose,

Thanks for getting in touch! I’m not really sure but I think that’s Youtube’s way of embedding their videos. Simply removing the &rel=0 part of your link should fix the issue.


Hi Ben,

I know what you mean, but that’s not quite the issue. You’ll notice in the code snippet above that the script seems to be excluding the “https:” part at the beginning of the URL—that’s what is messing things up.

I tried a few times with different URLs and they are always messed up when the tag is rendered… in the case of using an Embed URL such as, the plugin turns it into this:


Notice that https: is omitted at the start, then the URL looks like it partially repeats right after the first “embed/”… it’s very strange!

The page in question is staged at
Click the “Ride Responsibly” button to see the problem.


Hey Jose,

It’s an iframe from an external source so we have no control over that. What I did before I replied was I tried your code, removed the &rel=0 part of the URL and it works fine hence my suggestion. Have you given that a shot? Just the same code you have on your original post without the &rel=0 part on the href.



I could have sworn I tried that the first time around but I did try it again now and it worked! Very strange… it seems the script counts characters somehow?? Does it look at the “&” and whatever follows, and crop the beginning of the URL accordingly?

The reason I had the “&rel=0” was that I don’t want the “related videos” to appear after this video plays. So now I have a different issue to deal with. BUT at least the video plays now. Thanks!

Hey Jose,

No worries! I think it has something to do with how Youtube adds a ?autoplay=1 to the URL when you embed it. It makes the URL of the iframe which doesn’t work. I tried playing around with it and changed it so it becomes and it works just fine. But, it’s an external sourced iframe. We don’t have total control over the links.

Hope this makes sense.