Rendre un iframe réactif

Question

Rendre un iframe réactif

Demandé el 24 de Juillet, 2013: Quand la question a-t-elle été
491894 affichage: Nombre de visites la question a
4 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

4 Réponses

Answer 2

0voto

M. Lak Points 299

Vérifiez ce code complet. Vous pouvez utiliser les conteneurs en 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>

Répondu el 25 de Janvier, 2018 par M. Lak (299 Points )

Answer 3

0voto

XPloRR Points 172

Le code ci-dessous permet de redimensionner le contenu à largeur fixe d'un site Web non réactif dans une iframe à la largeur de la fenêtre d'affichage, uniquement si sa largeur est supérieure à la largeur de la fenêtre d'affichage. Pour les besoins de la démonstration, le site Web est une image unique de 800 pixels de large. Vous pouvez tester en redimensionnant la fenêtre de votre navigateur ou en chargeant la page dans votre téléphone :

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
iframe {width: 100%; transform-origin: left top;}
.imgbox{text-align:center;display:block;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>   
<script>
jQuery(document).ready(function($){
    nsZoomZoom(); 
    $(window).resize(function(){ 
        nsZoomZoom();
    });
    function nsZoomZoom(){
        htmlWidth = $('html').innerWidth();
        iframeWidth = 800;
        if (htmlWidth > iframeWidth)
            scale = 1;
        else {
            scale = htmlWidth / (iframeWidth); 
        }
        $("iframe").css('transform', 'scale(' + scale + ')');
        $("iframe").css('width', '800');
    } 
}); 
</script>
</head>
<body>
<div class=imgbox>
    <iframe src="http://placekitten.com/g/800/600" scrolling=no width=800 height=600 frameborder=no></iframe>
</div>
</body>

Répondu el 14 de Août, 2020 par XPloRR (172 Points )

Answer 4

0voto

jay padaliya Points 126

Si vous utilisez bootstrap 4, utilisez simplement la classe utilitaire pour l'intégration.

https://getbootstrap.com/docs/4.5/utilities/embed/

Exemple :

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Xh3j915ZnCo?rel=0" allowfullscreen></iframe>
</div>

Répondu el 28 de Avril, 2021 par jay padaliya (126 Points )

Answer 5

0voto

Zohab Ali Points 1028

Je devais afficher la iframe en carré, c'est ce que j'ai utilisé.

.video-wrapper {
  position: relative;
  padding-bottom: 100%;
}
.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

Répondu el 30 de Juillet, 2021 par Zohab Ali (1028 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: