Twitter bootstrap3: HTML5, non-cross-domain iframe scale width and height

Question

I know this has been asked many times before, but please read on.

In bootstrap 3, I am trying to get an iframe to fill out a div.

I have scoured the internet and SO extensively, and tried every single thing I have come across with no luck.

Here is the scoop:

1. I need to load an html-page in a narrow div ID. It is not cross-domain; I have control over both.
2. I need to be able to style the content inside the iframe. Can I do that from "master" page (i.e the target page), or do I need to do that in the "incoming page", i.e. the iframe content html?
3. the iframe must be flexible: the height and width (width because of responsive design) need to expand according to content.

I am desperate, and wondering if Bootstrap3 is overriding something?

I have tried a desperate amount of css alteration in combination with the long list of css and js-solutions listed below.

Here are a bunch of things (not all) I have tried :-S

• Twitter Bootstrap iFrame usage?
• What's the correct way to size an iframe in a Twitter bootstrap fluid layout?
• http://bootply.com/search?kw=iframe
• Set iframe content height to auto resize dynamically
• Make Iframe to fit 100% of container's remaining height
• cross-domain iframe resizer?
• to fit iframe to its content height

Answer 1

Some options:

1: Try making the iframe responsive. iframes can't automagically expand, so you're going to have to decide on a good height, or use JavaScript. For width, bootstrap has you mostly covered. You do need to make a div around the iframe to respond for it. Then set the iframe's width css to 100%.

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
             <h1>I'm the left column</h1>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <iframe style="width: 100%;" src="http://..." height="200px"></iframe>
        </div>
    </div>
</div>

demo

2: Don't use an iframe. If it's on the same origin, use a function like $.load.

$('#targetlocation').load('/usually_in_an_iframe.html #main_element');

3: a combination of #1 and that fit a frame to its height question you linked to

Answer 2

Bootstrap 3.2 has released a handy responsive iframe class:

http://getbootstrap.com/components/#responsive-embed

i.e:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>