Buenas,
Buen día. Estoy teniendo problemas para hacer un banner responsive creado con responsive<iframe>
. Estoy usando el mismo método que tengouso para los videos de youtubevídeos, pero en este caso no me está funcionando.
Uso en el html:Código
<div class="redes">
<div class="caja">
<h2>Afiliados</h2>
</div>
<div class="embed-container">
<iframe src="//rcm-eu.amazon-adsystem.com/e/cm?t=laxtore-21&o=30&p=12&l=ur1&category=videojuegos&banner=1RX48D6WZRXCY43X4EG2&f=ifr" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;max-width:800px;max-height:600px;" frameborder="0"></iframe>
</div>
</div>
Código CSS3:
.redes .embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.redes .embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="redes">
<div class="caja">
<h2>Afiliados</h2>
</div>
<div class="embed-container">
<iframe src="//rcm-eu.amazon-adsystem.com/e/cm?t=laxtore-21&o=30&p=12&l=ur1&category=videojuegos&banner=1RX48D6WZRXCY43X4EG2&f=ifr" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;max-width:800px;max-height:600px;"
frameborder="0"></iframe>
</div>
</div>
.redes .embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.redes .embed-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
No consigo que el iframeiframe
se adapte a la resolución de manera dinámica.