¿Se puede hacer que un iframe responda con Bootstrap?

Question

Estoy atrapado en una situación en la que el diseñador HTML dice que su iFrame no puede responder usando Bootstrap, pero después de una investigación, encontré los siguientes enlaces donde dice que iFrame puede responder: link1 y link2.

HTML:

<div class="container">
<div class="row">
    <div class="span12">
        <ul class="nav nav-tabs" id="myTabs">
          <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
          <li><a href="#dpa" data-toggle="tab">DPA</a></li>
          <li><a href="#rn" data-toggle="tab">Antwon</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="home">
              <p>test</p>            
            </div>
          <div class="tab-pane" id="dpa" data-src="http://www.drugpolicy.org/">
              <iframe src=""></iframe>
            </div>
          <div class="tab-pane" id="rn" data-src="http://player.vimeo.com/video/37138051?badge=0">
              <iframe src="" width="500" height="203" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/37138051">ANTWON ♦ HELICOPTER</a> from <a href="http://vimeo.com/tauszik">Brandon Tauszik</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
            </div>
        </div>
    </div>
</div>

JS:

$('#myTabs').bind('show', function(e) {  
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
      if($(paneID+" iframe").attr("src")=="")
      {
        $(paneID+" iframe").attr("src",src);
      }
});

JSFiddle

javascript css twitter-bootstrap iframe

1

Dev 1 sep. 2014 a las 09:11

Answer 1

Sí, puedes usar bootstrap!

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

LINK DE REFERENCIA

5

Suganth G 1 sep. 2014 a las 05:17

Answer 2

En este ejemplo, tengo un video de Youtube incrustado en un iframe que se escala de manera receptiva si la ventana del navegador cambia de tamaño horizontal o verticalmente. Puede verlo en acción aquí (enlace). Estoy seguro de que probablemente podría alterar esto para satisfacer sus necesidades:

function resizeHeroVideo() {
    var content = $('#hero');
    var contentH = viewportSize.getHeight();
    contentH -= 158;
    if ($(".navbar-fixed-top")[0]) {
        contentH -= 30;
    }
    content.css('height',contentH);

    if(player != null) {
        var iframe = $('.videoWrapper iframe');
        var iframeH = contentH - 150;
        if (isMobile) {
            iframeH = 163; 
        }
        iframe.css('height',iframeH);
        var iframeW = iframeH/9 * 16;
        iframe.css('width',iframeW);
    }
}

El código completo para esa página también está en gist.

1

davidcondrey 1 sep. 2014 a las 05:34

¿Se puede hacer que un iframe responda con Bootstrap?

2 respuestas

LINK DE REFERENCIA

Preguntas relacionadas

Nuevas preguntas

javascript