Created
November 8, 2019 21:57
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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