twitter-bootstrap - codigo - twitter timeline
Receptivo iframe usando Bootstrap (5)
Estoy usando Bootstrap.
Tengo un texto que contiene 2 o 3 videos insertados de iframes.
Esta información se obtiene 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?
Opción 1
Con Bootstrap 3.2 puede envolver cada iframe en el contenedor responsive-embed 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>
Entonces, youtube entrega 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, simplemente 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.
La mejor solución que funcionó 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 a 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 el video embebido en
<div class="responsive-video">
<iframe ></iframe>
</div>
¡Eso es! Ahora puede usar videos receptivos en su sitio.
Por favor, mira esto, espero que sea de ayuda
<div class="row">
<iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
</iframe>
</div>
Opción 3
Para actualizar el iframe actual
$("iframe").wrap(''<div class="embed-responsive embed-responsive-16by9"/>'');
$("iframe").addClass(''embed-responsive-item'');