Rendre un iframe réactif

144

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

Mais lorsque 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 pour 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?)

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 à x largeur (100% pour tout mon contenu), puis l'iFrame se comporte mal et est le seul élément plus large (et donc colle au-delà de tous les autres contenus - si cela a du sens ??)

Quoi qu'il en soit, est-ce que quelqu'un sait pourquoi cela ne fonctionne pas? Merci.

voici le HTML & 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%;
}
css  iframe  responsive-design 
— Brighton
source
6
L'iframe lui-même («la boîte») peut être réactif. Mais tout ce qui se trouve à l'intérieur de l'iframe est une page séparée, et donc pas dans le domaine de votre CSS ni de JS.
— DA.
vous pouvez utiliser easyXDM pour la communication entre la page où l'i-frame est intégré et le document sur le serveur vers lequel pointe l'iframe.
— john Smith
1
Je préfère le CSS pur: stackoverflow.com/a/26194041/274502
— cregox

Réponses:

107

Je vous présente la solution The Incredible Singing Cat =)

.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 pour redimensionner de manière réactive

Alternativement, vous pouvez également utiliser la technique du ratio intrinsèque - Ceci est juste une option alternative de la même solution 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%;
}
— Omar
source
4
Voir également cet article expliquant cette technique plus en détail: smashingmagazine.com/2014/02/…
— Thomas Tempelmann
ne fonctionne que pour les iframes youtube. Voir ceci: jsfiddle.net/1bd8qw76
— csandreas1
2
Cette technique fonctionnera pour tous les iframes, le truc est que le contenu de l'iframe devra également être réactif, plus d'informations à ce sujet ici: benmarshall.me/responsive-iframes
— Ben Marshall
68

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

iframe, object, embed {
    max-width: 100%;
}
— Coussin Connor Mulhall
source
37
Vous ne réglez pas la hauteur du conteneur avec ce code.
— reggie
46

J'ai trouvé une solution de Dave Rupert / Chris Coyier. Cependant, je voulais rendre le parchemin disponible et j'ai donc proposé 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%;
}
— Avi
source
2
note future pour moi si le fond de remplissage du contenu est le rapport de la largeur du contenu, 800x600 est% 75, 800x536 est% 67
— nerkn
1
C'est un bon point de départ pour faire défiler les iframes pour sarafi et tous les appareils. très triste cependant ....
— klewis
C'est exactement ce dont j'avais besoin pour permettre à l'iframe de défiler, car elle mesurait plus de 5000 pixels. Les autres codes ont forcé le long iFrame à superposer le contenu ci-dessous.
— penmas
pour 16: 9, le fond de rembourrage devrait être de 56,25%
— Sergey Sklyar
17

Vous pouvez utiliser ces 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 violon js édité pour démonstration.

— Pragnesh Chaudhari
source
10

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>
— Leo Leoncio
source
J'ai mis à jour votre violon car il y avait des pièces erronées ici et là. C'est la même chose, et cela fonctionne de la même manière mais sans confusion. jsfiddle.net/6NSX3/263
— Techno.Shaman
IOS ne calcule pas correctement la hauteur, il prend en compte la barre de navigation. De plus, Iframe sur IOS ne peut pas faire défiler.
— Tine Koloini
6

DA a raison. Dans votre propre violon, l'iframe est en effet réactif. Vous pouvez le vérifier dans Firebug en vérifiant le dimensionnement de la boîte iframe. Mais certains éléments à l'intérieur de cette iframe ne sont pas réactifs, donc ils "ressortent" lorsque la taille de la fenêtre est petite. Par exemple, sa div#products-post-wrapperlargeur est de 8800 px.

— Philip007
source
5

Les iFrames PEUVENT être ENTIÈREMENT réactives tout en conservant leur rapport hauteur / largeur avec une petite technique CSS appelée la technique du ratio intrinsèque . J'ai écrit un article de blog traitant spécifiquement de cette question: https://benmarshall.me/responsive-iframes/

Cet essentiel 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>
Développer l'extrait

BOOM, totalement réactif!

— Ben Marshall
source
3

les iframes ne peuvent pas être réactifs. 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 sa propre hauteur et largeur définies.

L'exemple de lien violon fonctionne car il affiche un lien vidéo YouTube intégré dont la taille n'a pas été déclarée.

— MGDTech
source
C'est trompeur. L'exemple de lien violon fonctionne également lorsque la largeur et la hauteur de l'iframe youtube sont spécifiées.
— Philip007
14
Je suis déçu que ce soit si sévèrement défavorisé. Le message qu'il transmet est important; que les iFrames sont dangereux à rendre réactifs parce que vous êtes à la merci de la réactivité de la source. Oui, Youtube est l'exception. Mais son argument est toujours valable.
— MattWithoos
3

Simple, avec CSS:

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

Veuillez noter : mais cela ne rendra pas le contenu à l'intérieur réactif!

2ème EDIT:: Il existe deux types d'iframes réactifs, en fonction de leur contenu interne:

celui qui est lorsque l'intérieur de l'iframe ne contient qu'une vidéo ou une image ou plusieurs positionnés verticalement, pour lesquels les deux lignes de code CSS ci-dessus sont presque complètement suffisantes et le rapport hauteur / largeur a un sens ...

et l'autre est le:

Contact / formulaire d' inscription type de contenu , où non le rapport d'aspect ne nous devons garder, mais pour empêcher la barre de défilement d'apparaître, et le contenu sous-écoulement du récipient. Sur mobile, vous ne voyez pas la barre de défilement, vous faites simplement défiler jusqu'à ce que vous voyiez le contenu (de l'iframe). Bien sûr, vous lui donnez au moins une sorte de height, pour que la hauteur du contenu s'adapte à l'espace vertical se produisant sur un écran plus étroit - avec des requêtes multimédias, comme, par exemple:

@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
— Sándor Zuboly
source
1
c'est simple et génial
— vaishali kapadia
cela ne conserve pas les proportions lorsque l'iframe se redimensionne, c'est-à-dire que la hauteur reste la même quelle que soit la largeur.
— ryan
@ryan J'ai mis à jour ma réponse. Je suis partiellement d'accord avec vous, d'ailleurs.
— Sándor Zuboly
2

J'ai remarqué que le message de leowebdev semblait fonctionner de mon côté, cependant, il a éliminé deux éléments du site que j'essaie de créer: le défilement et le pied de page.

Le défilement que j'ai récupéré en ajoutant un scrolling="yes" Au code d'intégration iframe.

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

— Chris Knabenshue
source
2

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

iframe{  max-width: 100%;}
— Jestin
source
1
Mais cela n'a pas rendu le contenu interne réactif.
— Vir
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

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

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

iframe, object, embed {
  width: 100%;
  display: block !important;
}
Développer l'extrait

— Savangchai Saroj
source
1
Commencer

En raison des contraintes de sécurité du navigateur, vous devrez inclure le fichier Javascript à la fois dans la page «parent», ainsi que dans la page en cours d'intégration via un iframe («enfant»).

Dans la version actuelle, la page parent doit inclure la dernière version de jQuery. Il n'y a aucune dépendance sur jQuery pour la fonctionnalité de page enfant. Dans les versions futures, nous aimerions également supprimer la dépendance à jQuery pour le parent.

Remarque: le paramètre «xdomain» dans l'appel de la fonction makeResponsive () est facultatif.

Exemple de code <!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
— Ahmed Elcheikh
source
0

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

Je cherche plus sur ce sujet et j'obtiens enfin une bonne réponse. Vous pouvez essayer comme ceci :

.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>
Développer l'extrait

— Laurier
source
0

La meilleure solution pour rendre un "iframe" réactif et adapté à tous les écrans de l'appareil, il suffit d'appliquer 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 adapté à tous les appareils, appliquez ce code qui utilise des requêtes CSS @media avancées.

— Jeux Mizo
source
Bonjour, Le code html Iframe est simple ressemble à ceci:
— Mizo Games
<div class = "iframe"> <iframe src = ""> </iframe> </div>
— Mizo Games
En fait, je l'utilise avec mon site Web: Al3abMizo Games, et vous pouvez l'essayer en jouant à n'importe quel jeu sur n'importe quel appareil quelle que soit la taille de l'écran.
— Mizo Games
0

IFrame entièrement réactif pour les situations où le rapport hauteur / largeur est inconnu et le contenu de l'iFrame est entièrement réactif.

Aucune des solutions ci-dessus n'a fonctionné pour 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 hauteur / largeur n'était pas une option.

  1. Obtenez la hauteur de votre barre de navigation et de tout contenu AU-DESSUS ou EN DESSOUS de l'iFrame. Dans mon cas, je n'avais besoin que de soustraire la barre de navigation du haut 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 lors du redimensionnement, la fonction ne soit pas appelée un million de fois.

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

Consultez ce code complet. vous pouvez utiliser les conteneurs dans des pourcentages comme le code 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>

Consultez cette page de démonstration.

— M. Lak
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.