Bootstrap Modal - resize modal based on iframe height

Question

I need to resize this bootstrap modal based on the height of the iframe content because it is dynamic.

Using an onload and the following function I am getting nothing.

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

_Sigh._ I wouldn't lie to you. I would just use JSFiddle if I were you. — Nate Kibler, Jan 29 '14 at 18:37
**Update:** Turns out Plunker doesn't work well with work proxies. XMLHttpRequest errors everywhere. — Nate Kibler, Jan 29 '14 at 18:45
while this one is (kind of inaccurately) closed - based on Google results for Bootstrap - adding this css to the iframe tag solves the size of the modal: style="min-height: [your preferred pixel height];" — KJS, Jun 17 '21 at 23:24

score 4 · Accepted Answer · edited May 23 '17 at 12:28

4

Unless you set it explicitly using a height attribute (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.

edited May 23 '17 at 12:28

Community

1
1

answered Jan 29 '14 at 18:08

Stephen Thomas

13,843
2
32
53

score 2 · Answer 2 · answered Feb 17 '14 at 05:01

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:

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

could you elaborate on this? Why are you setting the .video-container height to 56.25%? — captainrad, Mar 19 '14 at 21:54

Bootstrap Modal - resize modal based on iframe height

2 Answers2