Bootstrap Modal - 根据 iframe 高度调整模式大小 [重复]答案

【问题标题】：Bootstrap Modal - resize modal based on iframe height [duplicate]Bootstrap Modal - 根据 iframe 高度调整模式大小 [重复]
【发布时间】：2014-01-29 17:53:16
【问题描述】：

我需要根据iframe 内容的高度调整此bootstrap 模式的大小，因为它是动态的。

使用onload 和以下函数我什么也没得到。

window.resizeIframe = function () {
         var frame = $('#custom-frame');
         var modalHeight = $('#custom-frame').contents().height();
         frame.height(modalHeight);

         $(window).resize(function() {
            frame.height(modalHeight);
         });
      };

我提供了一个 plunker： http://plnkr.co/edit/eElqXJwvxmpc1XMrdwIK?p=preview

【问题讨论】：

链接显示找不到 Plunk。
不，很好。再试一次。。
叹息。我不会骗你的。如果我是你，我只会使用 JSFiddle。
更新： 事实证明 Plunker 不能很好地与工作代理一起工作。到处都是 XMLHttpRequest 错误。
虽然这个是关闭的（有点不准确） - 基于 Google 的 Bootstrap 结果 - 将此 css 添加到 iframe 标记可解决模态的大小： style="min-height: [您的首选像素高度];"

标签： javascript jquery html twitter-bootstrap iframe

【解决方案1】：

除非您使用height 属性明确设置它（您没有这样做），否则<iframe> 的高度默认为150px。在设置模态高度之前，您需要设置<iframe> 高度。 this question中的一些信息。

【讨论】：

【解决方案2】：

使用这个：

 <div class="media video-container">
                        <iframe width="640" height="390" src="https://www.youtube.com/embed/OqP54KZOz0U" frameborder="0" allowfullscreen></iframe>
                      </div>

而 Css 是：

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;}

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

【讨论】：

您能详细说明一下吗？为什么将 .video-container 高度设置为 56.25%？