Using Magnific Popup plugin for video & getting strange results

Beaver Builder
1

Hi! I’m trying to use the built-in Magnific script to pop up a video, as per this post/thread: http://forum.wpbeaverbuilder.com/support/q/video-lightbox/#post-35343

In my HTML module I have this:

<a id="fl-homepage-video" href="https://www.youtube.com/watch?v=s9H3_zF6HVM&rel=0"><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
    });
});
</script>

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="//www.youtube.com/embed/s9H3_zF6HVM&rel=0?autoplay=1" 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?

2

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.

Ben

3

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 https://www.youtube.com/embed/s9H3_zF6HVM?rel=0, the plugin turns it into this:

//www.youtube.com/embed/ttps://www.youtube.com/embed/s9H3_zF6HVM?&rel=0?autoplay=1

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 http://74.220.219.131/~keelimoc/
Click the “Ride Responsibly” button to see the problem.

J

4

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.

Ben

5

Ben,

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!

6

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 https://www.youtube.com/watch?v=s9H3_zF6HVM&rel=0?autoplay=1 which doesn’t work. I tried playing around with it and changed it so it becomes https://www.youtube.com/watch?v=s9H3_zF6HVM?autplay=1&rel=0 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.

Ben