Los estilos no te funcionarán porque estás tratando con un documento embebido. Si inspeccionas el banner, verás que la imagen tiene un tamaño fijo dentro de una tabla. Por lo que, aunque le des 100%
al banner la imagen siempre tendrá el mismo tamaño.
La solución es acceder al DOM del iframe
Pero hay un problema con acceder al DOM del iframe por medio de iframe.contentDocument
; porque es muy probable que obtengas una restricción de seguridad al ser dominios cruzados.
Una solución es obtener el HTML de la URL del banner en el servidor y enviarla al cliente. Una vez en el cliente, puedes convertir el string HTML en un documento como tal. Aquí ya todo es más sencillo porque puedes acceder directamente al DOM como siempre:
document.addEventListener('DOMContentLoaded', function () {
let banners = document.querySelectorAll('.banner');
[].forEach.call(banners, banner => {
let url = btoa(banner.getAttribute('data-src'));
fetch (`${url}?bannerURL=${url}`)
.then(res => res.text())
.then(parseHTML.bind(this, banner));
});
});
function parseHTML (banner, html) {
let doc = new DOMParser().parseFromString(html, 'text/html');
let table = doc.body.querySelector('table');
banner.appendChild(table);
}
Finalmente, añades unos cuantos estilos para la tabla y la imagen:
.banner table {
height: 100%;
width: 100%;
}
.banner table img {
height: 100%;
width: 100%;
}
Demo
Nota: El demo estará disponible solo un corto período de tiempo ya que estoy haciendo un redireccionamiento hacia localhost. Una vez que detenga ésto, actualizaré mi respuesta y eliminaré el demo.
document.addEventListener('DOMContentLoaded', function() {
let banners = document.querySelectorAll('.banner');
[].forEach.call(banners, function (banner) {
let url = btoa(banner.getAttribute('data-src'));
fetch(`https://b4beb445.ngrok.io?bannerURL=${url}`)
.then(res => res.text())
.then(parseHTML.bind(this, banner));
});
});
function parseHTML(banner, html) {
let doc = new DOMParser().parseFromString(html, 'text/html');
let table = doc.body.querySelector('table');
banner.appendChild(table);
}
.redes .embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
text-align: center;
}
.redes .embed-container .banner {
display: block;
height: 100%;
max-height: 400px;
max-width: 600px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.banner table {
height: 100%;
width: 100%;
}
.banner table img {
height: 100%;
width: 100%;
}
<!-- solo para usar ES6 en navegadores viejos. No es necesario para que funcione. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.0/es6-promise.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
<div class="redes">
<div class="caja">
<h2>Afiliados</h2>
</div>
<div class="embed-container">
<div class="banner" data-src="//rcm-eu.amazon-adsystem.com/e/cm?t=laxtore-21&o=30&p=12&l=ur1&category=videojuegos&banner=1RX48D6WZRXCY43X4EG2&f=ifr">
</div>
</div>
</div>