Unable to remove related videos in youtube

Question

I have embedded a video with magnificpopup script. I am unable to remove related videos at the end of the reproduction of a youtbe embedded.

Here is the code I have tried:

<a class="popup-youtube" href="https://www.youtube.com/watch?rel=0&feature=player_detailpage&v=83UHRghhars">

but does not work. The following code nor reproduce the video

<a class="popup-youtube" href="https://www.youtube.com/watch?feature=player_detailpage&v=83UHRghhars&rel=0">

if i put the embed code that youtube tell me:

//www.youtube.com/embed/83UHRghhars?rel=0

the video does not work. What I am doing wrong?

Answer 1

Here is a way to do it by adding additional javascript as demonstrated here.

<script>
jQuery(window).load(function(){
    jQuery('a[href*="youtube.com/watch"]').magnificPopup({
       type: 'iframe',
           iframe: {
               patterns: {
                   youtube: {
                       index: 'youtube.com', 
                       id: 'v=', 
                       src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1'
                    }
               }
           }   
     });      
});
</script>

You can remove the '&autoplay=1' if you do not need it.

Answer 2

There is an issue here. I did this workaround.

$('.js-home-video .js-popup-youtube').magnificPopup({
// your default config here

// All below settings are default except the rel attribute in youtube-src
// This is here to remove the related videos from showing up after the video ends
// Adding rel=0 from url in html template stopped autoplay, hence this hack
iframe: {
  markup: '<div class="mfp-iframe-scaler">'+
    '<div class="mfp-close"></div>'+
    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
    '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button

  patterns: {
    youtube: {
      index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

      id: 'v=', // String that splits URL in a two parts, second part should be %id%
      // Or null - full URL will be returned
      // Or a function that should return %id%, for example:
      // id: function(url) { return 'parsed id'; }

      src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0' // URL that will be set as a source for iframe.
    }
  }
}
}