How to implement changing iframe parameters on a page?

Question

css

Please give me an idea on how to change the width and height parameters for all iframes on the page in a specific block (I use "main" in the example) via JS. The number of iframe objects does not have a fixed number. The iframe does not have an id. The problem is also to organize a check for the presence of the iframes themselves and the domain address in them, so as not to "load" the page once again.
What was:

<div class="main">
<div class="content">
<div class="panel1">
<iframe src="http://****/iframe" width="100" height="20" frameborder="0" allowfullscreen></iframe>
</div>
<div class="panel2">
<iframe src="http://****/iframe" width="100" height="20" frameborder="0" allowfullscreen></iframe>
</div>
<div class="panel3">
<iframe src="http://****/iframe" width="100" height="20" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

What should be:

<div class="main">
<div class="content">
<div class="panel1">
<iframe src="http://****/iframe" width="auto" height="20" frameborder="0" allowfullscreen></iframe>
</div>
<div class="panel2">
<iframe src="http://****/iframe" width="auto" height="20" frameborder="0" allowfullscreen></iframe>
</div>
<div class="panel3">
<iframe src="http://****/iframe" width="auto" height="20" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>