CODEWITHSUNDEEP
youtubemagnific-popup
emanuele
emanuele

Reputation: 2589

Unable to remove related videos in youtube

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?

Upvotes: 5

Views: 5889

Answers (5)

wittich
wittich

Reputation: 2321

I found in the docu of the Magnific Popup the callback markupParse:

markupParse: function(template, values, item) {
    // Triggers each time when content of popup changes
    // console.log('Parsing:', template, values, item);
},

It seems to be the best option to adjust an already existing script. The listen have alternative names which comes realy handy:

Alternative method: using events
Name of event should start from mfp and the first letter should be uppercase.
e.g. open becomes mfpOpen, beforeOpen becomes mfpBeforeOpen.

I used mfpMarkupParse to adjust my URL eg.:

$('.popup-youtube').on('mfpMarkupParse', function (e, template, values, item) {
    // Update iframe source
    values.iframe_src = values.iframe_src
        // Replace google URL
        .replace('youtube', 'youtube-nocookie');
        // Set rel = 0
        .replace('autoplay=1', 'autoplay=1&rel=0');
});

Or you use the jQuery extend function and update the defaults of magnificPopup:

// Add it after jquery.magnific-popup.js and before first initialization code
$.extend(true, $.magnificPopup.defaults, {
    iframe: {
        patterns: {
            youtube: {
                index: "youtube.com",
                id: "v=",
                src: "https://www.youtube-nocookie.com/embed/%id%?autoplay=1&rel=0"
            }
        }
    }
});

Keep in mind that the attribute rel=0 changed its behavior since 2018 (source).

Upvotes: 0

AlanP
AlanP

Reputation: 447

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

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'
                    }
               }
           }   
     });      
});

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

Upvotes: 12

tejasbubane
tejasbubane

Reputation: 942

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

Upvotes: 2

Nadav
Nadav

Reputation: 1819

  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<br>
 Replace: youtube.com/embed/%id%?rel=0&autoplay=1

  3. Hit 'Save'.

Voilà

Upvotes: 1

Privateer
Privateer

Reputation: 131

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.

Upvotes: 1

Related Questions