change inline min-height with screen resolution

Question

in my website i am using a plugin which is by default sending inline min-height of iframe

<iframe id="ec-frame" allowfullscreen="" style="width: 100%;min-height:659px; height:100%;" src="https://dash.evercam.io/live.view.private.widget?camera=stephens-green&amp;refresh=1&amp;api_id=&amp;api_key=&amp;rtmp=rtmp://media.evercam.io:1935/live/stephens-green?token=qoSoGPwrzLlE0ITuMa2Id_VbCGRYYGAfGJlVZVm_LfA6fcVPcHqbymbJQ9uSMSOiyYtl24i4kHr4tIm_fxfadHVNVN8mxVQ_Xps9rGsIssc=&amp;hls=https://media.evercam.io/live/stephens-green/index.m3u8?token=qoSoGPwrzLlE0ITuMa2Id_VbCGRYYGAfGJlVZVm_LfA6fcVPcHqbymbJQ9uSMSOiyYtl24i4kHr4tIm_fxfadHVNVN8mxVQ_Xps9rGsIssc=" frameborder="0" scrolling="no"></iframe>

due to this, when screen width changes this min-height remains same and causing a lot of space between the iframe and lower div.

I am trying to change this with on resize function

var currentHeight = $("#test > iframe").css('min-height');
    $(window).on('resize', function () {
      $('#test > iframe').css('min-height', "5px");
    });

but i really dont know/find how to edit this for dynamic min-height as screen width changes, the above function just set min-height to 5px but if i subtract something as

$('#test > iframe').css('min-height', currentHeight - "5px");

this doesn't work at all. what i want is to change min-height with the change in screen width as now min-height is at 659px, i want to subtract a value dynamically but dont know how to subtract it

Answer 1

Hello change like this :

var currentHeight = $("#test > iframe").css('min-height');
    $(window).on('resize', function () {
      $('#test > iframe').css('min-height', $( window ).height());
    });

that work dynamically as per how much you resize the window

thanks

Answer 2

You are subtracting string from int currentHeight - "5px" .

You have to do

 $('#test > iframe').css('min-height', parseInt(currentHeight) - 5);