Iframe reattivo utilizzando Bootstrap

100

Sto usando Bootstrap.

Ho un testo che contiene 2 o 3 video incorporati basati su iframe.

Questi dati vengono recuperati dal database.

Come posso rendere reattivi questi iframe?

Codice di esempio:

<div class="row">

   <div class="col-lg-12 col-md-12 col-sm-12">

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>


     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe> 

   </div>

</div>

Questo è un dato dinamico. Come posso renderlo reattivo?

twitter-bootstrap iframe

— New Co
fonte

possibile duplicato di Rendere un iframe reattivo

— mpgn

1

È bene notare quale versione di Bootstrap. Ho risposto con due opzioni.

— Christina

215

opzione 1

Con Bootstrap 3.2 puoi avvolgere ogni iframe nel wrapper di incorporamento reattivo di tua scelta:

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

opzione 2

Se non vuoi avvolgere i tuoi iframe, puoi utilizzare FluidVids https://github.com/toddmotto/fluidvids . Guarda la demo qui: http://toddmotto.com/labs/fluidvids/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>

— Christina
fonte

2

in grado di diminuire l'altezza di iframe. Sono passato da 100%a 80%classe .embed-responsive iframe. Ma sta dando spazio vuoto. dopo il video. Come evitare questo spazio.

— SatyaTNV

FINALMENTE funziona perfettamente! Potrebbe essere bello includere l'obbligatorio <p>Your browser does not appear to support iframes</p>tra i iframetag, ma mi chiedo se sia rilevante anche in questi giorni ... grazie ancora, molte soluzioni (hacky) erano vicine, ma questo è perfetto!

— svenevs

1

all'opzione 1: l'URL dei documenti è cambiato in getbootstrap.com/docs/3.3/components/#responsive-embed

— Alexander Schmidt

usa un formato e includilo per farlo funzionare - >> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css "> <script src = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/… > e all'interno del tag iframe -> frameborder = "0" style = "overflow: hidden; overflow-x: nascosto; overflow-y: nascosto; altezza: 100%; larghezza: 100%; posizione: assoluta; top: 0px; sinistra: 0px; a destra: 0px; in basso: 0px; "height =" 100% "width =" 100% "

— krishna

24

Per favore, dai un'occhiata, spero che sia d'aiuto

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>

— Mohamed
fonte

Grazie! Finalmente qualcosa di semplice che funziona davvero.

— Fatimaezzahra Rarhibou

13

La soluzione migliore che ha funzionato alla grande per me è quella che ho trovato nel link sottostante: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/

Devi: Copia questo codice nel tuo file CSS principale,

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px; overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

e poi metti il tuo video incorporato in

<div class="responsive-video">
    <iframe ></iframe>
</div>

Questo è tutto! Ora puoi utilizzare video reattivi sul tuo sito.

— sunblast
fonte

1

padding-bottom: 56.25%;fare cose strane

— Emidomenge

9

Quindi, YouTube distribuisce il tag iframe come segue:

<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>

Nel mio caso, l'ho appena cambiato in width = "100%" e ho lasciato il resto così com'è. Non è la soluzione più elegante (dopotutto, in diversi dispositivi otterrai rapporti strani) Ma il video stesso non si deforma, solo il frame.

— Julián
fonte

È reattivo in questo modo? Se lo è, manterrà le proporzioni?

— Csaba Toth

Bello e semplice. Ha funzionato per me! Grazie!

— Joe

Funziona anche per me. Mantieni l'altezza suggerita (nel tuo caso 315), ma cambia la larghezza in "100%". Ridimensiona in modo reattivo e funziona bene con le classi di colonne bootstrap.

— BAERUS

4

Opzione 3

Per aggiornare l'iframe corrente

$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');

— Ratha Hin
fonte

0

In funzione nell'agosto 2020

Usa questo

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

usa una proporzione

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

all'interno delle opzioni di utilizzo dell'iframe

 <iframe class="embed-responsive-item" src="..."
  frameborder="0"
    style="
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    "
    height="100%"
    width="100%"
  ></iframe>

— krishna
fonte