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

Je vous présente L'incroyable chat qui chante solution =)

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle : http://jsfiddle.net/omarjuvera/8zkunqxy/2/
En déplaçant la barre de la fenêtre, vous verrez une iframe qui se redimensionne en fonction des besoins.

---

Vous pouvez également utiliser l'option technique du rapport intrinsèque

• Il s'agit juste d'une option alternative à la même solution ci-dessus (tomate, tomate).

---

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

Answer 2

Essayez d'utiliser ce code pour le rendre réactif

iframe, object, embed {
    max-width: 100%;
}

Answer 3

J'ai trouvé une solution auprès de Dave Rupert / Chris Coyier. Cependant, je voulais rendre le rouleau disponible et j'ai donc trouvé ceci :

.myIframe {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/ 
  border: solid black 1px;
}

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

<div class="myIframe">
  <iframe> </iframe>
</div>

Answer 4

Vous pouvez utiliser les astuces mentionnées sur ce site http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

Il est très utile et facile à comprendre. Tout ce dont vous avez besoin pour créer

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

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

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Voici votre montage js fiddle pour la démonstration.

Answer 5

Les iframes ne peuvent pas être réactives. Vous pouvez rendre le conteneur de l'iframe réactif, mais pas le contenu qu'il affiche, puisqu'il s'agit d'une page Web qui a sa propre hauteur et sa propre largeur.

Le lien de l'exemple de bidouille fonctionne parce qu'il affiche un lien vidéo youtube intégré qui n'a pas de taille déclarée.