Brave Search

stackoverflow.com › questions › 17912159 › how-can-style-popup-iframe-in-magnific-pop-up

How can style popup iframe in Magnific Pop-Up? - Stack Overflow

codepen.io › gcmcafee › pen › MbWZex

1 of 3

This isn't a complete answer but it might help.

Change your options to something like this:

$('.iframe-link').magnificPopup({
   type: 'iframe',
   iframe: {
       markup: '<div class="mfp-iframe-scaler your-special-css-class">'+
                        '<div class="mfp-close"></div>'+
                        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen>            </iframe>'+
                    '</div>'
   }   

});

Then in you css Class do something like this:

.your-special-css-class {
    max-width: 320px !important;
    height: 85%;
    margin: auto;
    max-height: 780px;
    padding: 140% 16px 0 13px !important;
}

the important part to adjust the height is the padding....

2 of 3

  $(document).ready(function() {
    $('.open-popup-link').magnificPopup({
        type: 'iframe',
        iframe: {
            markup: '<style>.mfp-iframe-holder .mfp-content {max-width: 900px;height:500px}</style>'+ 
                    '<div class="mfp-iframe-scaler" >'+
                    '<div class="mfp-close"></div>'+
                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                    '</div></div>'
        }
    });
  });

CodePen

Magnific Popup Iframes

... <a class="mfp-pop mfp-iframe" ... target="_blank">See Inside</a> ... // Magnific Popup v1.1.0 by Dmitry Semenov // https://bit.ly/magnific-popup#build=inline+image+iframe (function(a){typeof define=="function"&&define.amd?define(["jquery"],a):typeof exports=="object"?a(...

stackoverflow.com › questions › 29929265 › magnific-popup-iframe-height-and-width

Magnific Popup iframe height and width - javascript

reddit.com › r/learnjavascript › magnific-popup/lightboxes - how would i go about displaying an iframe using it?

1 of 5

You can use mainClass option to add custom class to main containers:

$('.some-link').magnificPopup({
    // ...
    mainClass: 'my-custom-class',
});

Then you can style this particular popup:

.mfp-wrap.my-custom-class .mfp-content {
    height: 800px;
    max-height: 90vh;
    width: 800px;
    max-width: 90vw;
}

In this way you can use different dimensions for different popups - just use different mainClass and separate styles.

2 of 5

Try this one, and check if it would update.

.mfp-content {
    width:300px;
    height:300px;
 }

r/learnjavascript on Reddit: Magnific-popup/lightboxes - how would I go about displaying an iframe using it?

November 6, 2020 -

So I'm still relatively green to coding, and for my first professional assignment, my manager wants me to display an iframe in a lightbox/popup. I've decided to try and use either Magnific-popup or Lightbox2, whichever works really.

Magnific-popup has a section on how to load iframes, but I don't understand what it's trying to get me to do. I added the stylesheet and js files included in the Magnific-popup build tool to the javascript and stylesheet sections of the page builder I'm using, but I'm getting confused on how to initialize the code. When I try to click on the link on my webpage, nothing happens.

When it says that popup initialization should be executed after document ready, where does that imply I put this jQuery?

$(document).ready(function() {
    $('.image-link').magnificPopup({type:'image'});
});

Additionally, there are examples on how to change Magnify-popup to accept any domain for iframes, but they seem to all have the fact that they are video players in common. I'm not trying to play a video, it's just a form built in WordPress that is being access through an iframe.

Sorry if this question is really vague, I'm just feeling really lost and I don't know how to even begin approaching this problem. What am I supposed to do after adding the JS and CSS to my page to set up a lightbox/popup to display an iframe?

1 of 1

stackoverflow.com › questions › 30289204 › magnific-popup-to-load-html-link-contents-using-iframe

jquery - Magnific popup to load HTML Link contents using iframe - Stack Overflow

joomlaworks.net › forum › k2 community forum › english k2 community › magnific popup iframe - how to show that the iframe is loadi

1 of 1

Is there any more JS you can share? preferably all of the code that corresponds to test.popup

This code isn't tested but try changing the code inside this.open function to:

    $.magnificPopup.open({
                    tClose: options.closelabel,
                    tLoading: options.loadinglabel,
                    modal: modal,
                    type: 'iframe',
                    preloader: false,
                    midClick: true,
                    mainClass: 'mfp-fade',
                    removalDelay: 300,
                    closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
                    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
              srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
          },
                callbacks: {
                    open: function () {
                        log('popup open');
                        target.trigger('popupOpen');
                    },
                    close: function () {
                        log('popup close');
                        target.trigger('popupClose');

                        if ($(target).parent().hasClass('slides-item') && $(target).parent().parent().find('.slides-item').length > 1) {
                            TEST.carousel.playCarousel($(target).parent().parent().parent().parent());
                        }
                    }
                }
            });

Then the link to open the iframe would be:

<a href="http://www.linktowebpage.com" class="link-popup">
   <img src="http://lorempixel.com/300/150/food/" alt="Image">
</a>

Here is a fiddle of the code adpated to open a iframe http://jsfiddle.net/p90ysz80/2/

Joomlaworks

Magnific Popup Iframe - How to show that the iframe is loadi - Community Forum - JoomlaWorks

May 5, 2016 - Thanks for the comment, but java is not one of my disciplines, so I did find another solution with some CSS i the template custom.css I changed the iframe background from #000 (black) to transparent and added a couple of :before tags to display my own load text and animation

Find elsewhere

Google Bing Mojeek

github.com › dimsemenov › Magnific-Popup › issues › 1031

How do you call the iframe popup when its loaded dynamically · Issue #1031 · dimsemenov/Magnific-Popup

October 5, 2017 - //getting only present DOM element on page load $(document).ready(function() { $('.popup-webcam').magnificPopup({ disableOn: 0, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false }); }); The text was updated successfully, but these errors were encountered: Copy link ·

github.com › dimsemenov › Magnific-Popup › issues › 324

Control width of iframe popup? · Issue #324 · dimsemenov/Magnific-Popup

January 3, 2014 - No matter how I add styles to the iframe'd page that is being loaded in the popup to set its width to 600px, the popup opens to its max-width of 900px. Can I add an option to limit the width so...

Author chadcrowell

Hire Jordan Smith

hirejordansmith.com › show-images-iframe-video-magnific-popup-gallery

How To Show Images & Iframe Video in Magnific Popup Gallery

November 30, 2023 - A quick way to show images and iframe video in a Magnific Popup Gallery.

Price $$$

Call 918-998-3194

Address 4815 S Sheridan Rd Suite 106, 74145, Tulsa

stackoverflow.com › questions › 64486388 › adding-magnific-popup-for-youtube-video

adding magnific popup for youtube video - javascript

Run code snippetEdit code snippet Hide Results Copy to answer Expand

1 of 2

Copy  $(document).ready(function(){
    $('.popup-youtube, .popup-vimeo').magnificPopup({
      // disableOn: 700,
      type: 'iframe',
      mainClass: 'mfp-fade',
      removalDelay: 160,
      preloader: false,
      iframe:{
        patterns:{
          youtube:{
          index: 'youtube.com',
          id: 'v=',
          src: 'https://www.youtube.com/embed/%id%'
        },
      },
      srcAction:'iframe_src',
    },
      fixedContentPos: false
    });
  });

Declared src for iframe and it worked.

2 of 2

If you want the video in a popup/another window try this

Copy<!DOCTYPE html>
 <html lang="en" dir="ltr">
  <head>
   <base target="_top">
    <meta charset="utf-8">
    <title>popup</title>
     <link rel="stylesheet" href="magnific-popup.css">
      <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script src="jquery.magnific-popup.min.js"></script>
  </head>
  <body>
    <a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
  </body>
 </html>

please note the movement of all script tags to under the head, the updated URL, and the removal of

Copy <script type="text/javascript">
    $(document).ready(function(){
        $('.popup').magnificPopup({
          type:"iframe",
        })
      })
   </script>

if you want it embedded within the page (as an iframe) try:

Copy<!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
    <base target="_top">
      <meta charset="utf-8">
      <title>popup</title>
      <link rel="stylesheet" href="magnific-popup.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jquery.magnific-popup.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            $('.popup').magnificPopup({
              type:"iframe",
            })
          })
       </script>
    </head>
    <body>
      <iframe width="420" height="315" class= "popup" scr= "https://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1">play</iframe>
    </body>
</html>

also reference this site, w3 schools, (here)

also try it out here (option 1), RIGHT CLICK on the link in STACK OVERFLOWS ENGINE in any other you can just click on it but stack overflow requires you to right click and say "open in new tab"

Copy<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
  <base target="_top">
    <meta charset="utf-8">
    <title>popup</title>
    <link rel="stylesheet" href="magnific-popup.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.magnific-popup.min.js"></script>
    <script type="text/javascript"></script>
  </head>
  <body>
    <a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
  </body>
</html>

YouTube

youtube.com › code with abdullah nahian

How to use Magnific Popup jQuery Plugin | Image Popup | Image Gallery, iframe Video Popup Lightbox - YouTube

11:34

Become a Pro: Learn Premium Web Development & WordPress with Me! - https://rebrand.ly/premium-webdevelopment-coursesHello! Thanks for checking out this video...

Published July 15, 2025

Views 4K

GeeksforGeeks

geeksforgeeks.org › jquery › how-to-use-the-magnific-popup-jquery-plugin

How to Use the Magnific Popup jQuery Plugin? - GeeksforGeeks

July 15, 2025 - Magnific Popup is a fast, light, mobile-friendly and responsive lightbox and modal dialog jQuery plugin. It can be used to open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), and photo gallery.

stackoverflow.com › questions › 16816380 › fire-iframe-type-magnificpopup-programmatically

jquery - Fire iframe type magnificPopup programmatically - Stack Overflow

1 of 1

$.magnificPopup.open({
  items: {
    src: 'something.html'
  },
  type: 'iframe'
});

http://dimsemenov.com/plugins/magnific-popup/documentation.html#public-methods

stackoverflow.com › questions › 22792184 › how-can-i-get-magnific-popup-to-show-both-images-and-an-iframe-video-in-one-dyna

How can I get magnific popup to show both images and an iframe video in one dynamic gallery?

okler.net › forums › topic › changing-the-properties-of-iframe-that-is-opened-with-magnific-popup

1 of 4

Here is a simple solution I've used for this:

$('.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',
});

It should work with type formatters.

2 of 4

You are able to define the type ofa gallery item using the mfp-TYPE CSS class. So in this case you would add mfp-iframe to the anchor tag pointing to your video and the plugin will handle the rest.

HTML:

<div class="gallery">
  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-1.jpg">
     <img src="https://www.example.com/image-thumbnail-1.jpg" alt="">
  </a>

  <!-- Video item with mfp-iframe class -->
  <a href="https://www.example.com/video-url" class="mfp-iframe">
     <img src="https://www.example.com/video-thumbnail.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-2.jpg">
     <img src="https://www.example.com/image-thumbnail-2.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-3.jpg">
     <img src="https://www.example.com/image-thumbnail-3.jpg" alt="">
  </a>
</div>

JS:

$('.gallery').magnificPopup(
        {
            delegate: 'a',
            type: 'image',
            tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1] // Will preload 0 - before current, and 1 after the current image
            },
            image: {
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                titleSrc: function(item) {
                    return '';
                }
            }
        }
    );

More information can be found in the documentation:

http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types

Okler

Changing the properties of Iframe that is opened with magnific popup – Okler Themes

February 15, 2022 - You can change iframe style inside the popup with this css:

stackoverflow.com › questions › 24745982 › close-magnific-popup-iframe-when-clicking-on-link

Close Magnific Popup Iframe when Clicking on Link

1 of 3

You call $.magnificPopup.close() manually, but since it's in an iframe you need to call it from the parent window.

Here's what I did on an old project of mine

$('#yourlinkID').click(function(e) {
   e.preventDefault();
   if (window.parent == window.top) {
      window.parent.$.magnificPopup.close();
   }
});

2 of 3

Add class .close-my-popup to your link and this to your javascript file:

$(document).ready(function() {      
 $('.close-my-popup').click(function() {
    $.magnificPopup.close();
 });
});

Or you could do it like this:

<a href=".../downloads/example.pdf" target="_blank" onclick="$.magnificPopup.close();">Download file here.</a>

github.com › dimsemenov › Magnific-Popup › issues › 204

Popup inside iframe, avoid scroll of outer page · Issue #204 · dimsemenov/Magnific-Popup

September 6, 2013 - The problem is that if I click on an image inside the iframe, and the property css 'top' of the iframe isn't 0 (e.g. the iframe starts in the middle of visible page, it doesn't start from the top of visible page), the page containing the iframe scrolls down , such that the 'top' css property of the iframe becomes 0. ... $('.image-popup').magnificPopup({ type: 'image', closeOnContentClick: true, mainClass: 'mfp-img-mobile', image: { verticalFit: true }, callbacks: { open: function() { var magnificPopup = $.magnificPopup.instance; var iframe = $(".iframe", parent.document.body).first(); var ifra