$(document).ready(function() { $('.popup-youtube').magnificPopup({ type: 'iframe' }); }); ! 999px · Clear · Ctrl Ctrl Space Autocomplete · F Find · G Find Next · ⇧ G Find Previous · ⇧ Opt F Find & Replace · ⇧ F Format Code · [ Indent Code Right ·

$('#vimeo').magnificPopup({ items: { src: 'https://vimeo.com/148198462' }, type: 'iframe' }); $('#youtube').magnificPopup({ items: { src: 'https://www.youtube.com/watch?v=124qhYkJG2w' }, type: 'iframe' });

jQuery(document).ready(function() { jQuery('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', callbacks: { elementParse: function(item) { // Function will fire for each target element // "item.el" is a target DOM element (if present) // "item.src" is a source that you may modify console.log(item.el.context.className); if(item.el.context.className == 'video') { item.type = 'iframe', item.iframe = { patterns: { youtube: { index: 'youtube.com/', // String that detects type of video (in this case YouTube).

$('.video').magnificPopup({ type: 'iframe', disableOn: function() { // don't use a popup for mobile if( $(window).width() < 600 ) { return false; } return true; }, 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).

/* Video Popup*/ jQuery(document).ready(function ($) { // Define App Namespace var popup = { // Initializer init: function() { popup.popupVideo(); }, popupVideo : function() { $('.video_model').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false, gallery: { enabled:true } }); /* Image Popup*/ $('.gallery_container').magnificPopup({ delegate: 'a', type: 'image', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false, gallery: { enabled:true } }); } }; popup.init($); });

$('.video').magnificPopup({ type: 'iframe', iframe: { markup: '<div class="mfp-iframe-scaler">'+ '<div class="mfp-close"></div>'+ '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ '<div class="mfp-title">Some caption</div>'+ '</div>' }, callbacks: { markupParse: function(template, values, item) { values.title = item.el.attr('title'); } } }); var groups = {}; $('.galleryItem').each(function() { var id = parseInt($(this).attr('data-group'), 10); if(!groups[id]) { groups[id] = []; } groups[id].push( this ); }); $.each(groups, function() { $(this).magnificPopup({ type: 'image', closeOnContentClick: true, closeBtnInside: false, gallery: { enabled:true } }) });

// One Image $(".image-magnific").magnificPopup({ type: "image" }); // Gallery $(".gallery-magnific").magnificPopup({ type: "image", gallery: { enabled: true }, image: { titleSrc: function (item) { return ( item.el.find(".title").html() + `<small>${item.el.find(".author").html()}</small>` ); } } }); // Youtube Video $(".video-youtube").magnificPopup({ type: "iframe", removalDelay: 160, preloader: false });

$('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] // Will preload 0 - before current, and 1 after the current image }, callbacks: { elementParse: function(item) { console.log(item.el[0].className); if(item.el[0].className == 'video') { item.type = 'iframe', item.iframe = { patterns: { youtube: { index: 'youtube.com/', // String that detects type of video (in this case YouTube).

<button class="button" style="padding:20px;">Open popup</button> ! CSS Options · Format CSS · View Compiled CSS · Analyze CSS · Maximize CSS Editor · Minimize CSS Editor · Fold All · Unfold All · ! JS Options · Format JavaScript · View Compiled JavaScript · Analyze JavaScript · Maximize JavaScript Editor · Minimize JavaScript Editor · Fold All · Unfold All · $('.button').magnificPopup({ items: { src: 'https://www.youtube.com/watch?v=7eo8XpT4CmM' }, type: 'iframe', iframe: { markup: '<div class="mfp-iframe-scaler">'+ '<div class="mfp-close"></div>'+ '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ '</div>', patterns: { youtube: { index: 'youtube.com/', id: 'v=', src: '//www.youtube.com/embed/%id%?autoplay=1' } }, srcAction: 'iframe_src', } }); !

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

$('.popup').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 400, preloader: false, iframe: { patterns: { youtube: { index: 'youtube.com', id: 'v=', src: 'https://www.youtube.com/embed/%id%?rel=0&autoplay=1' } } }, }); ! 999px · Clear · Ctrl Ctrl Space Autocomplete ·

<a class="popup-youtube" href="https://player.vimeo.com/video/56930191?">Open The YouTube video</a> ! CSS Options · Format CSS · View Compiled CSS · Analyze CSS · Maximize CSS Editor · Minimize CSS Editor · Fold All · Unfold All · ! JS Options · Format JavaScript · View Compiled JavaScript · Analyze JavaScript · Maximize JavaScript Editor · Minimize JavaScript Editor · Fold All · Unfold All · $('.popup-youtube').magnificPopup({ type: 'iframe', iframe: { patterns: { vimeo_custom: { index: 'vimeo.com/', id: 'v=', src: 'https://15-lvl3-pdl.vimeocdn.com/01/1386/2/56930191/157932326.mp4?expires=1451076936&amp;token=02b519323bddbefd81c61' // URL that will be set as a source for iframe.

<!DOCTYPE html> <html lang="en"> ...dnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" /> </head> <body> <a class="popup-youtube" href="https://www.youtube.com/watch?v=pBFQdxA-apI">Open YouTube video</a><br> <a class="popup-vimeo" href="https://vimeo.co...

Runs a Youtube Video in Magnific Popup. GitHub Gist: instantly share code, notes, and snippets.

A bunch of different popups, modals and lightboxes created with help of Magnific Popup plugin .

August 25, 2015 - An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

View example of retina popup on CodePen. Zooming only works for images, for now. To add zooming effect, first of make sure that you included “zoom” module to Magnific Popup build (since v0.9.1.).

CodePen doesn't work very well without JavaScript · We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen · Need to know how to enable it?

May 30, 2018 - Edit Pen