HTML5 responsive banner does not work

I'm trying to include a responsive banner on my site (wp 4.9.6), following a guide I found on the internet (I'm an amateur).

The banner loads normally on the desktop, and responsiveness works on some Android devices. It does not work on tablets and IOS.

I'm using the style:

<style> 
.banner-iframe
 {position: relative;padding-bottom: 56.25%;padding-top:30px;height:0;overflow:hidden;} 
.banner-iframe iframe
 {position:absolute;top:0;left:0;width:100%;height: 100%;}
</style>

With these iframe parameters

<div class="banner-iframe">
 <iframe src="banner.html"
 style="border:0px #000000 none;" 
 name="meuBanner"
 scrolling="no"
 marginheight="0px"
 marginwidth="0px"
 width="728px"
 height="90px"
 frameborder="0">
 </iframe>
</div>