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

Avec le balisage suivant :

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

Le CSS suivant rend la vidéo pleine largeur et 16:9 :

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}

Answer 2

Je suis en train de faire des recherches sur ce sujet et j'ai finalement obtenu une bonne réponse. Vous pouvez essayer comme este :

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}

<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>

Answer 3

La meilleure solution pour rendre un "iframe" réactif et s'adapter à tous les écrans, il suffit d'appliquer ce code (qui fonctionne très bien avec les sites de jeux) :

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

Si vous cherchez un conteneur de jeux réactif adapté à tous les appareils, appliquez ce code qui utilise des requêtes CSS @media avancées.

Answer 4

iFrame entièrement réactive pour les situations où le rapport d'aspect est inconnu et où le contenu de l'iFrame est entièrement réactif.

Aucune des solutions ci-dessus ne répondait à mon besoin, qui était de créer une iFrame entièrement réactive contenant un contenu dynamique entièrement réactif. Le maintien d'un quelconque rapport d'aspect n'était pas envisageable.

1. Obtenez la hauteur de votre barre de navigation et de tout contenu situé AU-DESSUS ou AU-DESSOUS de l'iFrame. Dans mon cas, je n'avais besoin de soustraire que la barre de navigation supérieure et je voulais que l'iFrame remplisse tout l'écran jusqu'en bas.

Code :

function getWindowHeight() {
        console.log('Get Window Height Called')
        var currentWindowHeight = $(window).height()

        var iFrame = document.getElementById("myframe")
        var frameHeight = currentWindowHeight - 95

        iFrame.height = frameHeight; 

    }
//Timeout to prevent function from repeatedly firing
    var doit;
    window.onresize = function(){
      clearTimeout(doit);
      doit = setTimeout(resizedw, 100);
    };

J'ai également créé un délai d'attente pour que la fonction ne soit pas appelée un million de fois lors d'un redimensionnement.

Answer 5

Par exemple :

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

CSS

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

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