you would use these instead of hard coded number of pixels (99px),
caus eon big screens the number of pixles change the percentage of vh would keep the look the same

iframe.style = “border:0;height:50vh”;

In my custom CSS i had to use:

.MMM-RAIN-RADAR .iframe {
width: 300px;
height: 300px !important
}

I added the !important to get it to override this other inline style which seems to be ill formed.

Then copy the code above by highlighting it and then right clicking and choosing copy or highlighting it and pressing CTRL-C .
Then create a line within the custom.css by clicking below the body statements and then Right Click and Choose Paste or press CTRL-V

Make sure that this code is NOT within the brackets that specify body, but instead below those entries.

.MMM-RAIN-RADAR .iframe {width: 300px; height: 300px}

How do you add that to the custom css?

You could try this in your custom.css :

.MMM-RAIN-RADAR .iframe {width: 300px; height: 300px}