Bootstrap responsive iframe with auto height calculation

Question

I need to embed link in iFrame contents of the iframe are responsive and i want iframe to auto adjust to the height of iFrame so that whole iframe page is visible. http://quran.ksu.edu.sa/m.php

Fiddle http://jsfiddle.net/ww09rtbb/3/

I am not sure how to do it so that all content of iframe are visible.

Not sure if there is any build in css property to do it or i have to use jquery for it

UPDATED: I have somehow managed to do it with jquery

http://jsfiddle.net/ww09rtbb/5/

I am calculating and multiplying width by 1.8

var ifrmw = $('.content-wrapper' ).width();
var iframeh= ifrmw * 1.8;
//alert(iframeh);
$('.iframecls').css('min-height',iframeh); 

This can further be improved to to get exact height of iframe

Answer 1

I ran into a similar issue, and I had to write a function that checks for the height of the iframe every 200 milliseconds using setInterval() :

function adjustIframeHeight(iframe, minHeight, fix){

    var height = 0, $frame = $(iframe);
    if(typeof fix=='undefined') fix = 0;

    setInterval(function(){
        if( typeof $frame.contents()!=null && typeof $frame.contents() !='undefined' && $frame.contents() !=null && $frame.attr('src')!='') {
            curHeight = $frame.contents().find('body').height();
            $frame.css('height', height + fix); // you might need to add some extra values like +20px.
        } else {
            $frame.css('height', minHeight); // minimum height for the iframe.
        }
    },200);

}

Then call it like this:

$(function(){ 
    adjustIframeHeight('#iframeID', 200, 0);
});