How to control WordPress media library popup dimensions

Other Questions Wordpress
1

I’m having trouble with the size of my WordPress media library popup. Here’s what’s happening:

I have a lightbox popup that’s set to 90% width of the screen. Inside this lightbox, there’s a button that opens the WordPress media uploader. The problem is that the media uploader always opens in a window that’s smaller than my main lightbox.

I think this happens because my first popup is an iframe, so when the media uploader calculates its size, it uses the iframe dimensions instead of the full browser window. This makes the media library popup too small to work with properly.

I’ve tried setting different values but nothing seems to work. Does anyone know how to force the media uploader to use specific dimensions? I need it to open at 100% or at least much larger than it currently does.

Here’s the code I’m using:

var media_frame;
jQuery('#upload_image_btn').on('click', function(e) {
    e.preventDefault();
    
    if (media_frame) {
        media_frame.open();
        return;
    }
    
    media_frame = wp.media.frames.media_frame = wp.media({
        title: jQuery(this).data('title'),
        height: 600,
        button: {
            text: jQuery(this).data('button_text'),
        },
        multiple: false
    });
    
    media_frame.on('select', function() {
        var selected = media_frame.state().get('selection');
        selected.map(function(item) {
            item = item.toJSON();
            jQuery('#image_url_field').val(item.url);
            jQuery('#preview_image').attr('src', item.url);
            return false;
        });
    });
});

Any help would be appreciated!

2

I hit this exact problem building a custom dashboard plugin. WordPress’s media modal calculates dimensions based on the immediate parent container - in your case, that’s the iframe.

What fixed it for me was intercepting the modal creation entirely. Don’t try overriding CSS after it opens. Hook into the media frame before it renders:

var original_modal = wp.media.view.Modal;
wp.media.view.Modal = original_modal.extend({
    attach: function() {
        this.$el.css({
            'position': 'fixed',
            'width': '90vw',
            'height': '80vh',
            'left': '50%',
            'top': '50%',
            'transform': 'translate(-50%, -50%)',
            'z-index': '9999999'
        });
        return original_modal.prototype.attach.apply(this, arguments);
    }
});

This extends WordPress’s modal view class and overrides the attach method, forcing your dimensions before the modal renders. Key difference: it positions fixed relative to the viewport instead of letting WordPress calculate based on your iframe container.

3

WordPress calculates modal size based on the immediate parent container, not the browser window. Don’t try modifying the modal after it opens - force WordPress to ignore iframe constraints upfront. Set explicit dimensions in your media frame config, then use CSS to override the modal backdrop. Add a z-index override and position the modal relative to the document body instead of the iframe. After creating your media frame, inject custom CSS targeting the backdrop: media_frame.on(‘ready’, function() { jQuery(‘body’).append(‘.media-modal-backdrop { position: fixed !important; } .media-modal { position: fixed !important; width: 90% !important; height: 80% !important; }’); }); This repositions modal elements relative to the document root rather than letting WordPress use your iframe container for calculations. The ready event fires before rendering, so styling kicks in immediately.

4

iframe nesting with wp media modals is a nightmare. Had the same issue - just modify your media frame initialization to skip wordpress dimension detection completely. Add frame: 'post' to your config and it ignores iframe constraints. Way better than CSS hacks.

5

try adding this CSS to your plugin/theme: .media-modal { width: 90vw !important; height: 85vh !important; left: 5vw !important; top: 7.5vh !important; } it should help override the default and use actual viewport size.

6

You need to override the modal dimensions after the frame loads. WordPress calculates modal size based on the parent container - in your case, that’s the iframe. Add these properties to your media frame config:

media_frame = wp.media.frames.media_frame = wp.media({
    title: jQuery(this).data('title'),
    className: 'media-frame custom-media-frame',
    modal: true,
    multiple: false,
    button: {
        text: jQuery(this).data('button_text'),
    }
});

media_frame.on('open', function() {
    jQuery('.media-modal').css({
        'width': '90vw',
        'height': '80vh',
        'max-width': 'none',
        'left': '50%',
        'top': '50%',
        'transform': 'translate(-50%, -50%)'
    });
});

Using viewport units (vw/vh) instead of percentages fixes this because they reference the actual browser window, not the iframe container. The transform property keeps everything centered no matter what size the parent container is.

7

WordPress media library popup sizing sucks with iframes. I’ve hit this same wall multiple times - CSS overrides and viewport units don’t cut it.

You’re fighting WordPress’s modal system that wasn’t built for nested popups. Skip the CSS hacks and automate the whole media workflow instead.

I built something with Latenode that grabs media upload requests and handles everything through API calls. User clicks upload, it fires a workflow that opens a custom media selector, uploads to WordPress via REST API, and sends the media URL back to your form.

No more iframe sizing headaches since you’re ditching WordPress’s native modal completely. Set any size you want and it plays nice with your existing lightbox.

Bonus: extend it for auto image resizing, format conversion, or CDN uploads. 30 minutes to set up, zero CSS wrestling.

Check it out here: https://latenode.com

8

Had this exact issue building a custom admin interface last year. The iframe dimension calculation is super frustrating, but there’s a way cleaner approach than CSS overrides.

Don’t fight WordPress’s modal sizing logic - just intercept the frame creation and modify the container reference before it initializes. Use wp.media.frames.media_frame = wp.media.extend(wp.media.controller.Library.prototype, { initialize: function() { this.modal = new wp.media.view.Modal({ controller: this, title: this.options.title }); this.modal.$el.appendTo('body'); } }) then create your frame like normal.

This forces the modal to attach directly to document body instead of calculating dimensions from your iframe parent. The modal uses full browser window dimensions for sizing calculations. Works consistently across different WP versions and you don’t need viewport unit workarounds that break on mobile.