Skip to content

Instantly share code, notes, and snippets.

@Garconis
Created November 8, 2019 21:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Garconis/325b716caef016d300fc3f7836cf8613 to your computer and use it in GitHub Desktop.
Save Garconis/325b716caef016d300fc3f7836cf8613 to your computer and use it in GitHub Desktop.
Magnific Popup | Find YouTube anchor link and open it in popup, while also adding additional parameters such as a Playlist ID. Note, this requires magnificPopup JS to be loaded on the page.
jQuery(window).load(function(){
// target YouTube anchor links within this ID
jQuery('#fs-video-playlist a[href*="youtube.com/watch"]').magnificPopup({
type: 'iframe',
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 into two parts, second part should be %id%
// E.g., https://www.youtube.com/watch?v=eU9FruuFxk4
// Or null - full URL will be returned
// Or a function that should return %id%, for example:
// id: function(url) { return 'parsed id'; }
// we force add a Playlist ID at the end, so that it adds that info to each video. So only use this on videos that should have the Playlist info in it.
src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0&ytp-pause-overlay=0&modestbranding=1&list=PLpIvLuF2Dh9Z7Rrmoik2vuhaEaFCACfv4' // URL that will be set as a source for iframe.
},
vimeo: {
index: 'vimeo.com/',
id: '/',
src: '//player.vimeo.com/video/%id%?autoplay=1'
},
gmaps: {
index: '//maps.google.',
src: '%id%&output=embed'
}
// you may add here more sources
},
srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment