Rendre un iframe réactif

Question

Je lisais Peut-on rendre une iFrame réactive ? et l'un des commentaires/réponses m'a conduit à l'adresse suivante ce JSFiddle.

Mais lorsque j'ai essayé de mettre en œuvre le HTML et le CSS pour répondre à mes besoins, je n'ai pas eu les mêmes résultats/succès. J'ai créé mon propre JSFiddle pour que je puisse te montrer que ça ne marche pas de la même façon pour moi. Je suis sûr que cela a quelque chose à voir avec le type d'iFrame que j'utilise (par exemple, les images des produits doivent être réactives aussi ou quelque chose comme ça ?)

Mon principal souci est que lorsque les lecteurs de mon blog le consultent sur leur iPhone, je ne veux pas que tout soit à la largeur x (100 % pour tout mon contenu) et que l'iFrame se comporte mal et soit le seul élément plus large (et donc dépasse de tout le reste du contenu - si cela a un sens ?).

Quelqu'un sait-il pourquoi ça ne marche pas ?

Voici le HTML & CSS de mon JSFiddle (si vous ne voulez pas cliquer sur le lien) :

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Answer 1

J'ai remarqué que le post de leowebdev semblait fonctionner chez moi, mais il a supprimé deux éléments du site que j'essaie de réaliser : le défilement et le pied de page.

J'ai récupéré le défilement en ajoutant une fonction scrolling="yes" Au code d'intégration de l'iframe.

Je ne sais pas si le pied de page est automatiquement supprimé à cause de la réactivité ou non, mais j'espère que quelqu'un d'autre connaît la réponse.

Answer 2

Supprimer la hauteur et la largeur des iframes spécifiées en pixels et utiliser le pourcentage

iframe{  max-width: 100%;}

Answer 3

<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}

Answer 4

Ça m'a résolu en ajustant le code de @Connor Cushion Mulhall en

iframe, object, embed {
  width: 100%;
  display: block !important;
}

Answer 5

Si vous utilisez la bibliothèque CSS Bootstrap, vous pouvez utiliser les classes d'intégration réactives qu'elle fournit :

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Plusieurs rapports d'aspect différents sont pris en charge, voir la documentation .