twitter-bootstrap Bootstrap Modal - 根据 iframe 高度调整模态大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21438823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal - resize modal based on iframe height
提问by captainrad
I need to resize this bootstrapmodal based on the height of the iframecontent because it is dynamic.
我需要bootstrap根据内容的高度调整此模式的大小，iframe因为它是动态的。
Using an onloadand the following function I am getting nothing.
使用一个onload和以下功能我什么也没得到。
window.resizeIframe = function () {
var frame = $('#custom-frame');
var modalHeight = $('#custom-frame').contents().height();
frame.height(modalHeight);
$(window).resize(function() {
frame.height(modalHeight);
});
};
I've provided a plunker: http://plnkr.co/edit/eElqXJwvxmpc1XMrdwIK?p=preview
我提供了一个plunker：http://plnkr.co/edit/eElqXJwvxmpc1XMrdwIK?p=preview
回答by Stephen Thomas
Unless you set it explicitly using a heightattribute (which you're not doing), the height of an <iframe>defaults to 150px. Before setting the modal height, you'll need to set the <iframe>height. Some information in this question.
除非您使用height属性（您没有这样做）明确设置它，否则高度<iframe>默认为 150px。在设置模态高度之前，您需要设置<iframe>高度。这个问题的一些信息。
回答by eng.mariamalkassar92
Using This:
使用这个：
<div class="media video-container">
<iframe width="640" height="390" src="https://www.youtube.com/embed/OqP54KZOz0U" frameborder="0" allowfullscreen></iframe>
</div>
And Css is:
而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%;}
