Rendere reattivo un iframe

144

Stavo leggendo questo post di StackOverflow intitolato "Riesci a rendere reattivo un iFrame?", E uno dei commenti / risposte mi ha portato a questo jfiddle.

Ma quando ho cercato di implementare HTML e CSS per soddisfare le mie esigenze, non ho avuto gli stessi risultati / successo. Ho creato il mio violino JS in modo da poterti mostrare come non funziona lo stesso per me. Sono sicuro che ha qualcosa a che fare con il tipo di iFrame che sto usando (ad esempio, le immagini del prodotto potrebbero dover essere troppo reattive o qualcosa del genere?)

La mia principale preoccupazione è che quando i miei lettori di blog visitano il mio blog sul loro iPhone, non voglio che tutto sia alla larghezza x (100% per tutti i miei contenuti) e quindi l'iFrame si comporta male ed è l'unico elemento più ampio (e quindi si attacca oltre tutti gli altri contenuti - se questo ha senso ??)

Ad ogni modo, qualcuno sa perché non funziona? grazie.

ecco l'HTML e CSS di MY JSFIDDLE (se non si desidera fare clic sul collegamento):

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

ed ecco il CSS di accompagnamento:

.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
fonte
6
L'iframe stesso ('the box') può essere reattivo. Ma tutto all'interno dell'iframe è una pagina separata, e quindi non nel dominio del tuo CSS o JS.
— DA.
è possibile utilizzare easyXDM per la comunicazione tra la pagina in cui è incorporato i-frame e il documento sul server a cui punta l'iframe.
— John Smith,
1
Io preferisco puro css: stackoverflow.com/a/26194041/274502
— cregox

Risposte:

107

Vi presento la soluzione 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/
Mentre sposti la barra della finestra, vedrai iframe per ridimensionare responsivamente

In alternativa, puoi anche utilizzare la tecnica del rapporto intrinseco - Questa è solo un'opzione alternativa della stessa soluzione sopra (pomodoro, pomodoro)

.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
fonte
4
Vedi anche questo articolo che spiega questa tecnica in modo più dettagliato: smashingmagazine.com/2014/02/…
— Thomas Tempelmann il
funziona solo con iframe di YouTube. Vedi questo: jsfiddle.net/1bd8qw76
— csandreas1
2
Questa tecnica funzionerà per tutti gli iframe, il trucco è che anche il contenuto dell'iframe dovrà essere reattivo, di più su questo qui: benmarshall.me/responsive-iframes
— Ben Marshall
68

Prova a utilizzare questo codice per renderlo reattivo

iframe, object, embed {
    max-width: 100%;
}
— Cuscino Connor Mulhall
fonte
37
Non stai regolando l'altezza del contenitore con questo codice.
— Reggie,
46

Ho trovato una soluzione da Dave Rupert / Chris Coyier. Tuttavia, volevo rendere disponibile lo scorrimento, quindi ho pensato a questo:

// 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
fonte
2
nota futura per me se il contenuto del padding-bottom è il rapporto tra la larghezza del contenuto, 800x600 è% 75, 800x536 è% 67
— nerkn
1
Questo è un buon punto di partenza per far scorrere gli iframe per sarafi e tutti i dispositivi. molto triste però ....
— Klewis il
Questo è esattamente ciò di cui avevo bisogno per consentire allo iframe di scorrere, poiché era lungo oltre 5000 px. Gli altri codici hanno costretto l'iFrame lungo a sovrapporsi al contenuto seguente.
— penmas,
per 16: 9, il fondo dovrebbe essere del 56,25%
— Sergey Sklyar l'
17

È possibile utilizzare questi trucchi menzionati in questo sito http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

È molto utile e facile da capire. Tutto ciò che devi creare

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

Ecco il tuo violino modificato per dimostrazione.

— Pragnesh Chaudhari
fonte
10

Dai un'occhiata a questa soluzione ... funziona per me >> 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
fonte
Ho aggiornato il tuo violino poiché c'erano alcuni pezzi sbagliati qua e là. È lo stesso e funziona allo stesso modo ma senza confusione. jsfiddle.net/6NSX3/263
— Techno.Shaman il
IOS non calcola l'altezza correttamente, tiene conto della barra di navigazione. Anche Iframe su IOS non è scorrevole.
— Tine Koloini,
6

DA ha ragione. Nel tuo violino, l'iframe è davvero reattivo. Puoi verificarlo in firebug controllando il dimensionamento della casella iframe. Ma alcuni elementi all'interno di quell'iframe non rispondono, quindi "sporgono" quando le dimensioni della finestra sono piccole. Ad esempio, div#products-post-wrapperla larghezza è di 8800 px.

— Philip007
fonte
5

iFrames PU be ESSERE COMPLETAMENTE reattivo mantenendo le proporzioni con una piccola tecnica CSS chiamata Intrinsic Ratio Technique . Ho scritto un post sul blog affrontando specificamente questa domanda: https://benmarshall.me/responsive-iframes/

Questa sostanza è:

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

BOOM, completamente reattivo!

— Ben Marshall
fonte
3

iframe non può essere reattivo. È possibile rendere reattivo il contenitore iframe ma non il contenuto che viene visualizzato poiché è una pagina Web con altezza e larghezza impostate.

Il collegamento del violino di esempio funziona perché visualizza un collegamento video YouTube incorporato che non ha una dimensione dichiarata.

— MGDTech
fonte
Questo è fuorviante. Il collegamento del violino di esempio funziona anche quando vengono specificate la larghezza e l'altezza iframe di YouTube.
— Philip007,
14
Sono deluso dal fatto che sia stato così duramente declassato. Il messaggio che sta trasmettendo è importante; che gli iFrame sono pericolosi per essere reattivi perché sei al capriccio della reattività della fonte. Sì, Youtube è l'eccezione. Ma il suo punto è ancora valido.
— MattWithoos,
3

Semplice, con CSS:

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

Nota : ma non renderà reattivo il contenuto al suo interno!

2 ° EDIT: ci sono due tipi di iframe responsive, a seconda del loro contenuto interno:

uno che è quando l'interno dell'iframe contiene solo un Video o un immagine o molti posizionato verticalmente, per cui i suddetti due righe di codice CSS è quasi completamente sufficiente, e il rapporto di aspetto è significato ...

e l'altro è il:

tipo di contenuto del modulo di contatto / registrazione , in cui non è necessario mantenere le proporzioni, ma per impedire la visualizzazione della barra di scorrimento e il flusso insufficiente del contenuto nel contenitore. Sul cellulare non vedi la barra di scorrimento, scorri fino a quando non vedi il contenuto (dell'iframe). Ovviamente gli dai almeno un qualche tipo di height, per far sì che l'altezza del contenuto si adatti allo spazio verticale che si verifica su uno schermo più stretto - con query multimediali, come ad esempio:

@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
fonte
1
questo è semplice e fantastico
— vaishali kapadia,
ciò non mantiene le proporzioni durante il ridimensionamento dell'iframe, ovvero l'altezza rimane invariata indipendentemente dalla larghezza.
— Ryan,
@ryan Ho aggiornato la mia risposta. Sono parzialmente d'accordo con te, a proposito.
— Sándor Zuboly,
2

Ho notato che il post di leowebdev sembrava funzionare dalla mia parte, tuttavia ha eliminato due elementi del sito che sto cercando di realizzare: lo scrolling e il piè di pagina.

Lo scorrimento sono tornato aggiungendo un scrolling="yes" codice di incorporamento all'IFrame.

Non sono sicuro che il footer venga automaticamente eliminato a causa della reattività o meno, ma spero che qualcun altro conosca quella risposta.

— Chris Knabenshue
fonte
2

Rimuovi l'altezza e la larghezza dell'iframe specificate in pixel e usa la percentuale

iframe{  max-width: 100%;}
— Jestin
fonte
1
Ma, non ha reso i contenuti interni reattivi.
— 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
fonte
1

mi ha risolto modificando il codice di @Connor Cushion Mulhall di

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

— Savangchai Saroj
fonte
1
Iniziare

A causa di vincoli di sicurezza del browser, dovrai includere il file Javascript sia nella pagina "principale", sia nella pagina incorporata tramite un iframe ("figlio").

Nella versione corrente, la pagina padre deve includere l'ultima versione di jQuery. Non vi è alcuna dipendenza da jQuery per la funzionalità della pagina figlio. Nelle versioni future, vorremmo rimuovere la dipendenza da jQuery anche per il genitore.

Nota: il parametro "xdomain" nella chiamata alla funzione makeResponsive () è facoltativo.

Esempio di codice <!-- 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
fonte
0

Con il seguente markup:

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

Il seguente CSS rende il video a larghezza intera e 16: 9:

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
— Dorian
fonte
0

Sto cercando di più su questo argomento e finalmente ottengo una bella risposta. Si può provare come questo :

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

— Alloro
fonte
0

La migliore soluzione per rendere un "iframe" reattivo e adattarsi a tutte le schermate del dispositivo, è sufficiente applicare questo codice (funzionando perfettamente con i siti di giochi): 

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

Se stai cercando un contenitore di giochi reattivo adatto a tutti i dispositivi, applica questo codice che utilizza query CSS @media avanzate.

— Mizo Games
fonte
Ciao a tutti, il codice html di Iframe è semplice è proprio così:
— Mizo Games
<div class = "iframe"> <iframe src = ""> </iframe> </div>
— Mizo Games
In realtà lo uso con il mio sito Web: Al3abMizo Games e puoi provarlo giocando a qualsiasi gioco su qualsiasi dispositivo, qualunque sia la dimensione dello schermo.
— Mizo Games,
0

IFrame completamente reattivo per situazioni in cui le proporzioni sono sconosciute e il contenuto in iFrame è completamente reattivo.

Nessuna delle soluzioni di cui sopra ha funzionato per il mio bisogno, che era quello di creare un iFrame pienamente reattivo che contenesse al suo interno contenuto dinamico completamente reattivo. Mantenere qualsiasi tipo di formato non era un'opzione.

  1. Ottieni l'altezza della barra di navigazione e qualsiasi contenuto SOPRA o SOTTO l'iFrame. Nel mio caso avevo solo bisogno di sottrarre la barra di navigazione superiore e volevo che l'iFrame si riempisse fino in fondo allo schermo.

Codice: 

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);
    };

Ho anche creato un timeout in modo che al ridimensionamento la funzione non venga richiamata un milione di volte.

— JPeG
fonte
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
fonte
0

Dai un'occhiata a questo codice completo. puoi usare i contenitori in percentuale come sotto il codice:

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

Dai un'occhiata a questa pagina dimostrativa.

— M. Lak
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.