Magnific Popup iframe height and width

Question

I have a problem with Magnific Popup where I need to be able to set the height and width on the iframe with a javascript function. The following code does not react to the heights and widths I put in, what's wrong?

/// Call ////
openmagnificPopup(url, h, w);



/// Java ////

function openmagnificPopup(url, h, w){

   $.magnificPopup.open({
            items: {
            src: url,
            type: 'iframe',

            iframe: {
               markup: '<div style="'+w+'px; height:'+h+'px;">'+
    '<div class="mfp-iframe-scaler" >'+
            '<div class="mfp-close">xxxxxx</div>'+
    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
    '</div></div>'
            }

        }


        });


///// CSS /////   
 .mfp-iframe-holder .mfp-content {
    width:auto;
    min-width:300px;
    min-height:300px;
 }

Answer 1

Try this one, and check if it would update.

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

Answer 2

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.

Answer 3

You can adjust the height in the open callback, by setting CSS style or append another class on .mfp-content

var config = {
    type: 'iframe',
    alignTop: true,
    overflowY: 'scroll',
    callbacks: { }
};

var cssHeight = '800px';// Add some conditions here

config.callbacks.open = function () {
    $(this.container).find('.mfp-content').css('height', cssHeight);
};

$('.some-handle').magnificPopup(config);