You'll need to integrate some third-party video player, for example http://mediaelementjs.com/
I'd recommend to use inline type of popup, as it allows you to open in popup any HTML code. http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline-type
Related example: http://codepen.io/dimsemenov/pen/GtjBb
Answer from Dmytro Semenov on Stack OverflowCodePen
codepen.io › gearmobile › pen › jWbZBB
Magnific Popup Video Link
Minimize JavaScript Editor · Fold All · Unfold All · $('#vimeo').magnificPopup({ items: { src: 'https://vimeo.com/148198462' }, type: 'iframe' }); $('#youtube').magnificPopup({ items: { src: 'https://www.youtube.com/watch?v=124qhYkJG2w' }, ...
CodePen
codepen.io › kliedLABS › pen › DWZoww
Magnific-Popup Youtube Video
Minimize JavaScript Editor · Fold All · Unfold All · $(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 ·
CodePen
codepen.io › townivan › pen › EVGKEq
magnific-popup example
Minimize JavaScript Editor · Fold All · Unfold All · $('.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).
CodePen
codepen.io › mattlansom › pen › epRNpp
Magnific Popup Gallery with Videos
Minimize JavaScript Editor · Fold All · Unfold All · 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).
CodePen
codepen.io › randhawa › pen › zjRwbe
Magnific Popup Image Video Gallery
Minimize JavaScript Editor · Fold All · Unfold All · /* 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($); }); !
Top answer 1 of 3
11
You'll need to integrate some third-party video player, for example http://mediaelementjs.com/
I'd recommend to use inline type of popup, as it allows you to open in popup any HTML code. http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline-type
Related example: http://codepen.io/dimsemenov/pen/GtjBb
2 of 3
5
You can use the type of content - iframe to open MP4 video:
<a class="mfp-iframe" href="MP4_VIDEO_PATH">Open MP4 video in iframe</a>
CodePen
codepen.io › Khloe1425 › pen › ZEOLbWG
Magnific popup video
Minimize JavaScript Editor · Fold All · Unfold All · $(document).ready(function () { $(".popup-with-zoom-anim").magnificPopup({ type: "inline", fixedContentPos: false, fixedBgPos: true, overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: "my-mfp-zoom-in" }); }); !
CodePen
codepen.io › qm › pen › WJLKGg
Magnific Popup image and video slider
Minimize JavaScript Editor · Fold All · Unfold All · $('.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).
CodePen
codepen.io › finikkkk › pen › poZdazW
Image, Gallery, Youtube Video with Magnific Popup
Minimize JavaScript Editor · Fold All · Unfold All · // 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 }); !
CodePen
codepen.io › russel365 › pen › NqMwgq
Magnific Popup Examples video and image
Minimize JavaScript Editor · Fold All · Unfold All · $('.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 } }) }); !
CodePen
codepen.io › meladq › pen › CLqtk
Magnific Popup - 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', } }); !
CodePen
codepen.io › marimoman › pen › xxxEYXx
magnific popup youtube autoplay
Minimize JavaScript Editor · Fold All · Unfold All · $('.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' } } }, }); !
Dimsemenov
dimsemenov.com › plugins › magnific-popup › documentation.html
Magnific Popup Documentation
Here you can find the guide on how to use Magnific Popup. Besides this docs page, you can play with examples on CodePen.
CodePen
codepen.io › dante9518 › pen › mVrppO
Custom iframe source / Magnific Popup
<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&token=02b519323bddbefd81c61' // URL that will be set as a source for iframe.
CodePen
codepen.io › webrav › pen › ZrBNQR
Video Pop Up on click image or link - Youtube, Vimeo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script> <link rel="stylesheet" href="https://cdnjs.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
CodePen
codepen.io › collection › AzzLgA
Magnific Popup Examples - a Collection by Dmytro Semenov on CodePen
A bunch of different popups, modals and lightboxes created with help of Magnific Popup plugin .
CodePen
codepen.io › TheSagarMahajan › pen › rxMjKd
magnific popup
Minimize JavaScript Editor · Fold All · Unfold All · $(document).ready(function () { // $("#img1").hover(function () { $("#label1").fadeIn(100); }); //$("#img1").mouseleave(function () { $("#label1").fadeOut(100); }); $("#closer").click(function(){ $(".magnific_popup").fadeOut(300); $("#popup_container").css("animation-name", "popup_fadeout"); $("#popup_container").css("animation-duration", ".5s"); }); }); function popup() { $(document).ready(function(){ $(".magnific_popup").fadeIn(100); $("#popup_container").css("animation-name", "popup_fadein"); $("#popup_container").css("animation-duration", ".5s"); }); } !
CodePen
codepen.io › ompmega › pen › QEXWvq
MagnificPopup Image & Video gallery mix
.white-popup-block { background: #FFF; padding: 20px 30px; text-align: left; max-width: 650px; margin: 40px auto; position: relative; } ! JS Options · Format JavaScript · View Compiled JavaScript · Analyze JavaScript · Maximize JavaScript Editor · Minimize JavaScript Editor · Fold All · Unfold All · jQuery(document).ready(function($) { $('.image-link, .video-link').magnificPopup({ callbacks: { elementParse: function(item) { // the class name if(item.el.context.className == 'video-link') { item.type = 'iframe'; } else { item.type = 'image'; } } }, gallery:{enabled:true}, type: 'image',
Top answer 1 of 3
6
I have got this to work using the following as a link to open the video:
<a class="popup-player" href="/static/video/bunny.mp4">
video link
</a>
and then used the Iframe type to display it:
$('.popup-player').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>',
srcAction: 'iframe_src',
}
});
This is a very basic version, it opens the video in an iframe but I have yet to work out how to change the things like the height and width. I'm still learning this stuff so I dont know how it works I just know it puts a video up on the screen. If you get it working and build a more complex version please let me know so I can improve my version.
2 of 3
4
This worked great for me. Uses "Inline" type with auto-starting HTML5 video.
Javascript:
$('.openVideo').magnificPopup({ type: 'inline', callbacks: { open: function() { $('html').css('margin-right', 0); // Play video on open: $(this.content).find('video')[0].play(); }, close: function() { // Reset video on close: $(this.content).find('video')[0].load(); } } });HTML:
<a href="#video-01" class="openVideo"> <div id="video-01" class="video-popup mfp-hide"> <video preload="false" poster="/videos/01.png"> <source src="/videos/01.mp4" type="video/mp4"> </video> </div>
Original source: https://github.com/dimsemenov/Magnific-Popup/issues/626
CodePen
codepen.io › dimsemenov › pen › AYGbjO
Popup with mixed content types
Minimize JavaScript Editor · Fold All · Unfold All · $('#open-popup').magnificPopup({ items: [ { src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_&_Paul_fortress_in_SPB_03.jpg/800px-Peter_&_Paul_fortress_in_SPB_03.jpg', title: 'Peter & Paul fortress in SPB' }, { src: 'https://vimeo.com/123123', type: 'iframe' // this overrides default type }, { src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element type: 'inline' }, { src: '<div class="white-popup">Popup from HTML string</div>', // HTML string type: 'inline' }, { src: '#my-popup', // CSS selector of an element on page that should be used as a popup type: 'inline' } ], gallery: { enabled: true }, type: 'image' // this is a default type }); !