Question

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

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

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

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

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

Answer 1

除非您使用height属性（您未执行此操作）明确设置，否则<iframe>的高度默认为150px。在设置模态高度之前，您需要设置<iframe>高度。 this question中的一些信息。

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

Bootstrap Modal - 基于iframe高度调整大小模式

2 个答案: