Skip to content

Instantly share code, notes, and snippets.

@philbar
Last active December 10, 2022 08:18
Show Gist options
  • Save philbar/7357321f491dd36f1343 to your computer and use it in GitHub Desktop.
Save philbar/7357321f491dd36f1343 to your computer and use it in GitHub Desktop.
Runs a Youtube Video in Magnific Popup.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//www.youtube.com/iframe_api"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<script>
$(document).ready(function() {
// Initializes Magnific Popup
$('#lp-pom-image-202 a, #lp-pom-box-218 a, #lp-pom-box-217 a').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
// Changes iFrame to support Youtube state changes (so we can close the video when it ends)
iframe: {
markup: '<div class="mfp-iframe-scaler">' +
'<div class="mfp-close"></div>' +
'<iframe id="player" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
'</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
// Converts Youtube links to embeded videos in Magnific popup.
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0&showinfo=0&enablejsapi=1'
}
}
},
// Tracks Youtube video state changes (so we can close the video when it ends)
callbacks: {
open: function() {
new YT.Player('player', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
}
});
// Closes Magnific Popup when Video Ends
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
$.magnificPopup.close();
}
}
});
</script>
@mikeriley131
Copy link

Thanks for this!

@yuranikolaev
Copy link

thanks, helped me a lot

@vikrantnegi
Copy link

Thanks. Exactly what I was looking for.

@boregar
Copy link

boregar commented Sep 15, 2020

Brilliant, thanks a lot !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment