Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Magnific-popup Youtube problem

I wish to open a video in a pop-up video from youtube and at the end of the video I would not have related videos (rel=0). I'm using Jquery Magnific Popup The page I'm working on is this: draft page

Unfortunately now the video instead opens in a new separate window, how can I also fix it?

Thank you, marco.

User Gravatar

Impulsipro

Posted Jun 4 2014 2:29 UTC

$25


  • Assigned To Gaby
  • Solved
  • javascript
    jquery
    youtube
  • 6930 Views

2 Replies


you can use this $(document).ready(function() { $('.popup-video').magnificPopup({type:'image'}); });

User Gravatar

dotnand

Posted Jun 4 2014 6:58 UTC

The problem is that the click event is not cancelled. I haven't pinpointed yet the reason this happens (because you are using many plugins, and it might just be a conflict),
but as a quick fix you can add

$('.mfp-youtube').on('click', function(e){
    return false;
});

to your code.


for the rel=0 part you need to pass the following options to the plugin

iframe: {
  patterns: {
    youtube: {
      src: '//www.youtube.com/embed/%id%?autoplay=1'
    }
  }
}

All issues together can be solved by replacing your code with

jQuery('.mfp-youtube, .mfp-vimeo, .mfp-gmaps').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 0,
    preloader: false,
    fixedContentPos: false,
    iframe: {
        patterns: {
            youtube: {
                src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0'
            }
        }
    }
});

$('.mfp-youtube').click(function () {
    return false;
});

Additionally, you are using v0.8.9 of the magnificPopup plugin, while the current version is v0.9.9 so it wouldn't hurt to upgrade to the latest version.

User Gravatar

Gaby

Posted Jun 4 2014 7:30 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions