web-dev-qa-db-fra.com

Faire un iframe responsive

Je lisais ce post stackoverflow intitulé "Pouvez-vous rendre un iFrame responsive?", Et l'un des commentaires/réponses m'a conduit à ce jfiddle.

Mais quand j'ai essayé d'implémenter 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 violon JS afin que je puisse vous montrer comment cela ne fonctionne pas de la même manière pour moi. Je suis sûr que cela a quelque chose à voir avec le type d'iFrame que j'utilise (par exemple, les images du produit doivent également être réactives ou quelque chose du genre?).

Ma principale préoccupation est que, lorsque les lecteurs de mon blog visitent mon blog sur leur iPhone, je ne veux pas que tout soit à la largeur x (100% pour tout mon contenu). dépassé tous les autres contenus - si cela a du sens ??)

Quoi qu'il en soit, quelqu'un sait-il pourquoi cela ne fonctionne pas? Je vous remercie.

voici le code HTML et CSS de MY JSFIDDLE (si vous ne voulez pas cliquer sur le lien):

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

et voici le CSS qui l'accompagne:

.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%;
}
cssiframeresponsive-design
122
Brighton

Je vous présente La solution du chat chanteur incroyable =)

.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/
Lorsque vous déplacez la barre de fenêtre, vous verrez iframe redimensionner en conséquence. 

Alternativement, vous pouvez également utiliser la technique technique du rapport intrinsèque - Ceci n’est qu’une alternative à la même solution que celle décrite ci-dessus (tomate, tomate)

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

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

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

iframe, object, embed {
    max-width: 100%;
}
67
Connor Cushion Mulhall

J'ai trouvé une solution de Dave Rupert/Chris Coyier. Cependant, je voulais rendre le parchemin disponible alors je suis arrivé avec ceci: 

//HTML

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

//CSS

.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%;
}
42
Avi

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

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

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

.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%;
}

Voici votre montage js fiddle pour démonstration. 

16
Pragnesh Chaudhari
iframe{
  max-width: 100% !important;
}
9
Christian Michael

découvrez cette solution ... fonctionne pour moi >> https://jsfiddle.net/y49jpdns/

<html lang="en" class="no-js">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <style>
      html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
         var calcHeight = function() {
           $('#preview-frame').height($(window).height());
         }

         $(document).ready(function() {
           calcHeight();
         }); 

         $(window).resize(function() {
           calcHeight();
         }).load(function() {
           calcHeight();
         });
      </script>
   </head>
   <body>
      <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
      </iframe>
   </body>
</html>
8
Leo Leoncio

DA a raison. Dans votre propre violon, l’iframe est effectivement réactif. Vous pouvez vérifier cela dans firebug en vérifiant le dimensionnement de la boîte iframe. Mais certains éléments à l'intérieur de l'iframe ne réagissent pas, ils "restent" lorsque la taille de la fenêtre est petite. Par exemple, la largeur de div#products-post-wrapper est 8800px.

6
Philip007

les iFrames peuvent être entièrement réactives tout en conservant leurs proportions avec une petite technique CSS appelée technique du rapport intrinsèque . J'ai écrit un article de blog qui traitait spécifiquement de cette question: https://benmarshall.me/responsive-iframes/

Ce Gist est:

.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%;
}

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

BOOM, totalement réactif!

2
Ben Marshall

J'ai remarqué que le message de leowebdev semblait fonctionner, mais il a masqué deux éléments du site que j'essaie de créer: le défilement et le pied de page.

Le défilement que je suis revenu en ajoutant un scrolling="yes"Pour le code intégré iframe.

Je ne sais pas si le pied de page est automatiquement désactivé à cause de la réactivité, mais j'espère qu'une autre personne connaît cette réponse.

2
Chris Knabenshue

Supprimer la hauteur et la largeur de l'iframe spécifiées en pixels et utiliser le pourcentage

iframe{  max-width: 100%;}
2
Jestin

Simple, avec CSS:

iframe{
width: 100%;
max-width: 800px /*this can be anyting you wish, to show, as default size*/
}

S'il vous plaît, notez : Mais cela ne rendra pas le contenu à l'intérieur sensible!

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

.wrap { 
    overflow: auto;
}

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

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

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

1
Savangchai Saroj

Cette solution a fonctionné pour moi. Et j'ai trouvé ça plus facile. https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/

0
Vishwas Gagrani

les iframes ne peuvent pas être sensibles. Vous pouvez rendre le conteneur iframe réactif, mais pas le contenu qu'il affiche car il s'agit d'une page Web qui a ses propres hauteur et largeur définies.

L'exemple de lien Fiddle fonctionne car il affiche un lien vidéo youtube incorporé dont la taille n'est pas déclarée.

0
MGDTech

La meilleure solution pour rendre un "iframe" réactif et s’adapter à tous les écrans de périphériques, appliquez simplement ce code (fonctionne parfaitement 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 recherchez un conteneur de jeux réactif compatible avec tous les appareils, appliquez ce code qui utilise des requêtes CSS @media avancées.

0
Al3abMizo Games
For Example :

<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%;
}
0
KTrivedi

Je cherche plus sur ce sujet et enfin obtenir une bonne réponse . Vous pouvez essayer comme this :

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

0
user3951808

iFrame entièrement réactif pour les situations dans lesquelles le rapport de format est inconnu et où le contenu de iFrame est entièrement réactif.  

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

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

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

0
JPeG

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;
  }
}
0
Dorian

Découvrez ce code complet. vous pouvez utiliser les conteneurs en pourcentages comme ci-dessous:

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.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%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

Découvrez cette page de démonstration .

0
M. Lak