Iframe receptivo usando Bootstrap

100

Estoy usando Bootstrap.

Tengo un texto que contiene 2 o 3 videos incrustados basados ​​en iframes.

Estos datos se obtienen de la base de datos.

¿Cómo puedo hacer que estos iframes respondan?

Código de ejemplo:

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

Este es un dato dinámico. ¿Cómo puedo hacer que responda?

twitter-bootstrap iframe Nueva Co
fuente
posible duplicado de hacer que un iframe sea receptivo
mpgn
1
Es bueno saber qué versión de Bootstrap. He respondido a esto con dos opciones.
Christina

Respuestas:

215

Opción 1

Con Bootstrap 3.2, puede envolver cada iframe en el contenedor de inserción de respuesta de su elección:

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>

opcion 2

Si no desea ajustar sus iframes, puede usar FluidVids https://github.com/toddmotto/fluidvids . Vea la demostración aquí: 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
fuente
2
incapaz de disminuir la altura de iframe. He cambiado de 100%a 80%clase .embed-responsive iframe. Pero está dando espacio vacío. después del video. Cómo evitar este espacio.
SatyaTNV
¡FINALMENTE esto funciona perfectamente! Podría ser bueno incluir el obligatorio <p>Your browser does not appear to support iframes</p>entre las iframeetiquetas, pero me pregunto si eso es relevante en estos días ... gracias de nuevo, muchas soluciones (hacky) estuvieron cerca, ¡pero esto es perfecto!
svenevs
1
a la Opción 1: la URL de los documentos cambió a getbootstrap.com/docs/3.3/components/#responsive-embed
Alexander Schmidt
use una relación de aspecto e inclúyala para que funcione - >> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <enlace rel = "stylesheet" href = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css "> <script src = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/… > y dentro de la etiqueta iframe -> frameborder = "0" style = "overflow: hidden; overflow-x: oculto; overflow-y: oculto; altura: 100%; ancho: 100%; posición: absoluta; arriba: 0px; izquierda: 0px; derecha: 0px; abajo: 0px; "altura =" 100% "ancho =" 100% "
krishna
24

Por favor, mira esto, espero que te sea de ayuda

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>
Mohamed
fuente
¡Gracias! Ugh, finalmente algo simple que realmente funciona.
Fatimaezzahra Rarhibou
13

La mejor solución que funcionó muy bien para mí es la que encontré en el siguiente enlace: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/

Tienes que: Copiar este código en tu archivo CSS principal,

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

y luego coloque su video incrustado en

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

¡Eso es! Ahora puede usar videos receptivos en su sitio.

rayos de sol
fuente
1
padding-bottom: 56.25%;hacer cosas raras
Emidomenge
9

Entonces, youtube emite la etiqueta iframe de la siguiente manera: 

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

En mi caso, lo cambié a width = "100%" y dejé el resto como está. No es la solución más elegante (después de todo, en diferentes dispositivos obtendrás proporciones extrañas) Pero el video en sí no se deforma, solo el marco.

Julian
fuente
¿Responde de esa manera? Si es así, ¿mantendrá la relación de aspecto?
Csaba Toth
Agradable y sencillo. ¡Trabajó para mi! ¡Gracias!
Joe
Funciona para mí también. Manteniendo la altura sugerida (en su caso 315), pero cambie el ancho a "100%". Escala de forma responsable y funciona bien con las clases de columna de arranque.
BAERUS
4

Opción 3

Para actualizar el iframe actual

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

Trabajando durante agosto de 2020

utilizar este

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

usar una relación de aspecto

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

dentro de las opciones de uso de 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
fuente