Maximum iframe height and width

Question

I have a problem with Magnific Popup where I need to set the height and width in an iframe using javascript function. The following code does not respond to the heights and widths I inserted, what is 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 option and see if it updates.

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

Answer 2

. , , , magnific nerver iframe openmagnificpopup(). , 10 , - "w" "h" . openmagnificpopup() javascript,

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>'
            }

Answer 3

This should bring you there:

$(document).on('click', '*[data-toggle="lb-iframe"]:not(.done)', function(e) {    
        e.preventDefault();
        
        var closeBtnInside = true,
            closeOnBgClick = false,
            iframeCss = '';
        
        if( typeof($(this).data('closeonbgclick')) != 'undefined' ) {
            closeOnBgClick = $(this).data('closeonbgclick');
        }
        if( typeof($(this).data('closebtninside')) != 'undefined' ) {
            closeBtnInside = $(this).data('closebtninside');
        }
        if( typeof($(this).data('iframecss')) != 'undefined' ) {
            iframeCss = $(this).data('iframecss');
        }
        
        $(this).addClass('done').magnificPopup({
              type: 'iframe',
              iframe: {
                  markup: '<div class="mfp-iframe-scaler '+iframeCss+'">'+
                            '<div class="mfp-close"></div>'+
                            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                          '</div>'
              },
              closeOnBgClick: closeOnBgClick,
              closeBtnInside: closeBtnInside
            }).trigger('click');
    });

.mfp-iframe-holder .mfp-content {
    width: auto;
    max-width: none;
}
.mfp-iframe-scaler {
    width: 734px;
}
.mfp-iframe-scaler.mfp-iframe-lg {
    width: 1000px;
    height: 600px;
    padding: 0;
}

<a href="URL" data-toggle="lb-iframe" data-iframecss="mfp-iframe-lg" data-closeonbgclick="true"  data-closebtninside="true" title="">Popup</a>

Run codeHide result

Answer 4

You can adjust the height in the callback openby setting the CSS style or add another class in.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);