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?

score 12 · Answer 1 · answered Apr 29 '15 at 13:19

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.

score 2 · Answer 2 · answered May 18 '17 at 11:43

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.
    }
  }
}
}

score 1 · Answer 3 · answered Feb 03 '16 at 16:53

If you are using a mixed gallery (e.g. one of images and videos intermixed), then you might want to override how magnific popup builds the youtube embed.

The default for youtube are

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' // URL that will be set as a source for iframe.
}

This means that the ID is everything following v= and it simply takes that and sticks autoplay=1 at the end when creating the embed code.

To change this, you can pass in any special iframe youtube patterns to be used:

    iframe: {
        patterns: {
            youtube: {
                src: '//www.youtube.com/embed/%id%?autoplay=1&amp;rel=0&amp;feature=player_detailpage'
            }
        }
    }

Here, we adjusted the source so that it will build the embed using the id as normal and then stick your rel and feature parameters afterwards (along with autoplay)

If you do this, then leave your parameters off of the urls in the html mark up OR set the v= attribute at the end so that no extra parameters get tacked in when building the embed url.

The final look might be something like:

$('.gallery-list').magnificPopup({
    delegate: 'a',
    type: 'image',
    gallery: {
        enabled: true
    },
    iframe: {
        patterns: {
            youtube: {
                src: '//www.youtube.com/embed/%id%?autoplay=1&amp;rel=0'
            }
        }
    }
});

And your element might be:

<div class="gallery-list">
<a class="popup-youtube mfp-iframe" href="https://www.youtube.com/watch?v=83UHRghhars">Click here</a>
<img class="mfp-image" href="http://domain/image.jpg" width="100" height="200" />
</div>

The mfp-iframe class on the video link tells magnific to use iframe functionality.

The initialization code above told magnific to use image by default, but the mfp-iframe css class will override that for a video. Now, when someone clicks the video, magnific popup should grab the video id via the v= parameter and then build the embed code by using the id and then tacking on the extra autoplay and rel url parameters.

score 1 · Answer 4 · answered Dec 12 '17 at 14:35

1) Go to jquery.magnific-popup.min.js or jquery.magnific-popup.js, whatever you embed on your website.

2) Use your text editor to Search and Replace as follows:
Search: youtube.com/embed/%id%?autoplay=1
Replace: youtube.com/embed/%id%?rel=0&autoplay=1

3) Hit 'Save'.

Voilà

Unable to remove related videos in youtube

4 Answers4