Rendre une iframe responsive

j'ai lu ce stackoverflow post intitulé "Pouvez-vous faire une iFrame sensible?"et l'une des observations/réponses m'a conduit à ce jfiddle.

mais quand j'ai essayé de mettre en œuvre le HTML et 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 vous montrer comment ça ne marche pas pareil pour moi. Je suis sûr que ça a quelque chose à voir avec le type de iFrame j'utilise (par exemple, les images du produit pourraient avoir besoin d'être responsive aussi 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 width (100% pour tout mon contenu) et puis l'iFrame se comporte mal et est le seul élément plus large (et donc dépasse tous les autres contenus - si cela a du sens??)

est-ce que quelqu'un sait pourquoi ça ne marche pas? remercier.

voici le HTML & CSS de mon 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 la 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%;
}
118
demandé sur konekoya 2013-07-24 19:34:14

21 réponses

je vous présente Le Chant Incroyable Chat 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 /

comme vous déplacez la barre de fenêtre, vous verrez iframe à redimensionner de façon réceptive

75
répondu Omar 2017-01-27 07:12:08

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

iframe, object, embed {
    max-width: 100%;
}
65
répondu Connor Cushion Mulhall 2016-05-05 16:36:58

J'ai trouvé une solution de Dave Rupert / Chris Coyier. Cependant, je voulais rendre le parchemin disponible, alors j'ai trouvé 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%;
}
40
répondu Avi 2017-09-21 18:52:11

vous pouvez utiliser ces trucs mentionnés 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
répondu Pragnesh Chaudhari 2015-01-08 09:42:02 
iframe{
  max-width: 100% !important;
}
8
répondu Christian Michael 2014-05-27 21:27:40

regardez cette solution... travaille 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
répondu Leo Leoncio 2018-01-27 20:42:55

DA a raison. Dans votre propre violon, l'iframe est en effet sensible. Vous pouvez vérifier cela dans firebug en cochant iframe box-sizing. Mais certains éléments à l'intérieur de cette iframe n'est pas responsive, de sorte qu'ils "stick out" Lorsque la taille de la fenêtre est petite. Par exemple, la largeur de div#products-post-wrapper est 8800px.

6
répondu Philip007 2013-08-22 20:02:36

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

le scrolling je suis revenu en ajoutant un scrolling="yes" Au Code d'intégration iframe.

Je ne suis pas sûr si le pied de page est automatiquement frappé en raison de la réactivité ou non, mais j'espère que quelqu'un d'autre sait cette réponse.

2
répondu Chris Knabenshue 2014-11-13 17:16:34

supprimer la hauteur et la largeur iframe spécifiées en pixels et utiliser le pourcentage 

iframe{  max-width: 100%;}
2
répondu Jestin 2015-03-15 06:17:51

iFrames peuvent être pleinement sensibles tout en gardant leur rapport d'aspect avec un peu de CSS technique appelé intrinsèque Ratio Technique . J'ai écrit un billet de blog traitant spécifiquement de cette question: https://benmarshall.me/responsive-iframes /

Ce résumé 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, pleinement responsive!

2
répondu Ben Marshall 2017-12-12 21:53:28

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, noter : Mais il ne fera pas le contenu à l'intérieur de l'adapter!

2
répondu iorgu 2018-08-09 22:45:20 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
1
répondu Saran 2015-06-12 12:06:45

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

iframe, object, embed {
  width: 100%;
  display: block !important;
}
1
répondu Savangchai Saroj 2015-12-02 08:51:36

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
répondu Dorian 2015-03-26 03:42:11

je suis recherche plus sur ce sujet et obtenir enfin une réponse agréable. Vous pouvez essayer comme ce : 

.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
répondu Laurel 2016-04-23 17:33:36

la meilleure solution pour rendre un" iframe "responsive et s'adapter à tous les écrans de périphériques, il suffit d'appliquer ce code (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 êtes à la recherche d'un conteneur de jeux responsive compatible avec tous les appareils appliquent ce code qui utilise des requêtes avancées CSS @media.

0
répondu Al3abMizo Games 2016-08-06 13:03:36
Prise En Main

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 intégrée par une iframe ("enfant").

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

Note: le paramètre" xdomain " dans l'appel de la fonction makeResponsive() est optionnel.

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>
0
répondu Ahmed Elcheikh 2017-01-05 08:08:03

iFrame entièrement responsive pour les situations où le rapport d'aspect est inconnu et le contenu dans l'iFrame est entièrement responsive.

aucune des solutions ci-dessus n'a fonctionné pour mon besoin, qui était de créer une iFrame entièrement responsive qui avait un contenu dynamique entièrement responsive à l'intérieur de celui-ci. Il n'était pas possible de maintenir un quelconque rapport d'aspect.

  1. obtenez la hauteur de votre barre de navigation et tout contenu au-dessus ou au-dessous l'iFrame. Dans mon cas, j'avais seulement besoin de soustraire la barre de navigation supérieure et je voulais que l'iFrame remplisse tout le chemin 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 aussi créé un timeout de sorte que sur redimensionner la fonction ne serait pas appelé un million de fois.

0
répondu JPeG 2017-04-27 18:51:50 
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
répondu KTrivedi 2017-06-14 10:57:10

vérifiez ce code au complet. vous pouvez utiliser les conteneurs dans les 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émo .

0
répondu M. Lak 2018-01-25 06:34:47

iframes ne peut pas être responsive. Vous pouvez rendre le conteneur iframe responsive mais pas le contenu qu'il affiche car c'est une page Web qui a sa propre hauteur et largeur définie.

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

-1
répondu MGDTech 2018-03-21 05:11:51