【问题标题】：Can an iframe be made responsive using Bootstrap?可以使用 Bootstrap 使 iframe 具有响应性吗？
【发布时间】：2014-09-01 05:11:51
【问题描述】：

我陷入了这样一种情况，即 HTML 设计人员说您的 iFrame 无法使用 Bootstrap 进行响应，但经过研究，我想出了以下链接，其中说 iFrame 可以做出响应：link1 和 @987654322 @。

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

【问题讨论】：

你有什么问题？
可以使用 Bootstrap 使 iframe 响应式吗？
使用 CSS 可以使 iframe 成为 100% 的父级。 Bootstrap 是 CSS。
如果 iframe 的内容来自另一个域，则无法将其更改为响应式。
谢谢克里斯蒂娜，如果我有 2 个 iframe 并且 src 是动态设置的，那么它们可以在 Bootstrap 中做出响应吗？

标签： javascript css twitter-bootstrap iframe

【解决方案1】：

是的，您可以使用引导程序！

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

REFERENCE LINK

【讨论】：

谢谢杰克，如果我有 2 个 iframe 并且两个 iframe src 都是动态设置的，那么 iframe 会响应吗？基本上 iframe 中的内容将是一种静态形式，所以它仍然是响应式的吗？
任何东西都可以在 iframe 中加载，它会提供响应式
唯一的条件是 iframe 应该根据您的要求设计如上
酷，非常感谢杰克。

【解决方案2】：

在这个例子中，我有一个嵌入在 iframe 中的 Youtube 视频，无论浏览器窗口是水平还是垂直调整大小，它都会响应缩放。 You can see it in action here (link)。我相信您可以根据自己的需要进行更改：

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

该页面的完整代码也在gist上。

【讨论】：