3

Buen día. Estoy teniendo problemas para hacer un banner responsive creado con <iframe>. Estoy usando el mismo método que uso para los vídeos, pero en este caso no me está funcionando.

Código

.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>

No consigo que el iframe se adapte a la resolución de manera dinámica.

2
  • quieres que tu iframe sea responsive? Commented el 12 mar. 2017 a las 16:05
  • 1
    Si es lo que quiero conseguir.
    – user27826
    Commented el 12 mar. 2017 a las 16:09

2 respuestas 2

1

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>

-2

si utilizas flex, te ayudará a que sea responsive

  
    #embed-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
    
    <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>

1
  • Me funciona entre medias. Para los banners laterales sin problema, el caso es que quiero introducir estos banners dentro de artículos, entre medias, para ello creo el div creando un <h5> y después ya dentro incluyo todo el <iframe>, sin embargo los estilos en este caso no me funcionan.
    – user27826
    Commented el 12 mar. 2017 a las 16:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.