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&rel=0&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&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.