Rendre un iframe réactif

Question

Rendre un iframe réactif

Demandé el 24 de Juillet, 2013: Quand la question a-t-elle été
491883 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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>

Demandé el 24 de Juillet, 2013 par Brighton

Answer 1

5 Réponses

Answer 2

13voto

leowebdev Points 61

Découvrez cette solution. Elle 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>

Répondu el 5 de Août, 2014 par leowebdev (61 Points )

Answer 3

13voto

Ben Marshall Points 1075

Les iFrames PEUVENT être COMPLÈTEMENT réactives tout en conservant leur rapport hauteur/largeur grâce à une petite technique CSS appelée le Technique du rapport intrinsèque . J'ai écrit un article de blog pour répondre spécifiquement à cette question : https://benmarshall.me/responsive-iframes/

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

BOOM, entièrement réactif !

Répondu el 12 de Décembre, 2017 par Ben Marshall (1075 Points )

Answer 4

12voto

Christian Michael Points 71

iframe{
  max-width: 100% !important;
}

Répondu el 27 de Mai, 2014 par Christian Michael (71 Points )

Answer 5

6voto

Philip007 Points 940

DA a raison. Dans votre propre test, l'iframe est effectivement réactive. Vous pouvez le vérifier dans firebug en contrôlant le box-sizing de l'iframe. Mais certains éléments à l'intérieur de cette iframe ne sont pas réactifs, et ils "ressortent" lorsque la taille de la fenêtre est petite. Par exemple, div#products-post-wrapper La largeur du site est de 8800px.

Répondu el 22 de Août, 2013 par Philip007 (940 Points )

Answer 6

4voto

iorgu Points 67

Simple, avec CSS :

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

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

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

l'autre, c'est lorsque l'intérieur de l'iframe contient seulement a vidéo o un image o beaucoup de positionné verticalement, pour lequel les deux lignes de code CSS ci-dessus sont presque entièrement suffisantes, et l'élément le rapport d'aspect a une signification ...

et l'autre est le :

formulaire de contact/inscription type de contenu , donde no le rapport d'aspect que nous devons conserver, mais pour éviter que la barre de défilement n'apparaisse et que le contenu ne déborde du conteneur. Sur un 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, il faut lui donner au moins une sorte d'effet de levier. height pour que la hauteur du contenu s'adapte à l'espace vertical présent sur un écran plus étroit - avec des requêtes média, 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 */
}
}

Répondu el 18 de Septembre, 2017 par iorgu (67 Points )

Rendre un iframe réactif

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Rendre un iframe réactif

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: