Styles will not work because you're dealing with an embedded document. If you inspect the banner, you'll see that the image has a fixed size inside a table. So, even if you des 100% to the banner the image will always have the same size .
The solution is to access the DOM of iframe
But there is a problem with accessing the DOM of the iframe via iframe.contentDocument ; because it's very likely that you get a security restriction to be cross-domains.
One solution is to get the HTML of the banner URL on the server and send it to the client. Once on the client, you can convert the HTML string into a document as such. Here everything is easier because you can access the DOM directly as always:
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);
}
Finally, add a few styles for the table and the image:
.banner table {
height: 100%;
width: 100%;
}
.banner table img {
height: 100%;
width: 100%;
}
Demo
Note : The demo will be available only for a short period of time as I am redirecting to localhost. Once I stop this, I will update my response and delete the 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>