For visibility of [Lukx's comment], the real answer is to set `position:relative` on the iframe itself, since you might not have the ability to edit the html source page or it might need to use relative positioning.

Just add this CSS and you should be all set:



    iframe {
        position: relative;
    }

I wrote up a full description of the problem in [this answer][my answer]

[Lukx's comment]: https://stackoverflow.com/questions/11191155/iframe-content-doesnt-show-in-ie8#comment31508114_11205602
[my answer]: https://stackoverflow.com/a/23817415/1366033

I have a site with an iFrame.

The host page has some very basic JS on it, the iframed page has simple JS too.

When I embed the iframe as usualy: `<iframe src="iframeURL" width="900" height="1000"></iframe>` it works fine in all browsers but IE8.

I tried various things:

- first: disabling all JS
- removing src attribute and adding it with JS
- using `<object>` instead
- I used proxy.php to make the content appear as if it were coming from the same domain

It doesn't work in IE8 regardless what I do.

The funny thing is that I can open the page I want to iframe in a separate tab and works just fine.

If I change the src attribute to "some_other_random_page_from_internet" it works.

The other thing is that both host and iframe use postMessage to communicate and I can see the communication is working OK, it's just the content which doesn't show, but when I inspect the page source with developers tools I can see the content is there.

Is it possible that the content of the iframe causes issues? It's a basic HTML + basic JS, with JS disabled it shouldn't be an issue.

Any ideas what else I could check?

PS. I can't show the code (NDA , etc)

iFrame content doesn't show in IE8

# Here's a full breakdown:

## Steps to Reproduce: 

Create a page that has `position:relative` on the `html` element



    <html style="position:relative">
        <head></head>
        <body>TEST</body>
    </html>

Here's a test page in fiddle that does just that: 
 
### http://jsfiddle.net/KyleMit/DZbt5/show/light

Now use that page inside of an iFrame and open in IE8



    <html>
        <head></head>
        <body>
            <iframe src="http://jsfiddle.net/KyleMit/DZbt5/show/light/"></iframe>
        </body>
    </html>

### [Here's a fiddle that should work in all browsers *EXCEPT* IE8][broken fiddle]

## Solution:

As the previous answer suggests, you can remove `position:relative` from the original html page, but you might not have access to the page or be able to change it.

Instead, you can simply add relative position to the `iframe` element itself:



    iframe {
        position: relative;
    }

### [Working Demo in Fiddle - Also works in IE8][fixed fiddle]

## Other Instances

Question was also asked here:

* [iFrame content doesn't show in IE8][SO1]
* [Blank iFrame in IE][SO2]

[broken fiddle]: http://jsfiddle.net/KyleMit/uqDUL/7/show/light
[fixed fiddle]: http://jsfiddle.net/KyleMit/uqDUL/8/show/light

[SO1]: https://stackoverflow.com/q/11191155/1366033
[SO2]: https://stackoverflow.com/q/4444014/1366033

My website seems to work in all browsers but IE 8. Everything loads fine by the iFrame.

Here is my HTML code:

    <head>
       <title> Title </title>
       <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
       <script type="text/javascript" src="respond.min.js"></script>
    </head>

    <body>
      	<iframe src="http://instagram.com/p/cR5BORA8Ij/embed/" 
                width="300" height="400" frameborder="0" 
                scrolling="no" allowtransparency="true" id="myFrame"></iframe>		
    </body>

Any suggestions on what I could be doing wrong?

iFrame Not Loading IE 8

This is a *bug* in most browsers (IE appears fine) where the elements are fixed to the `iframe`, not the window. Typically, if you need something to be relative to the main document, it has to be in the main document. 

A workaround is to wrap your iframe in a fixed position div that takes up the whole width of the screen and then maximize the iframe within that.  This appears to resolve the issue

**HTML**:



    <div class="fixframe">
        <iframe src="http://getbootstrap.com/javascript/"></iframe>
    </div>

**CSS**:
    


    .fixframe {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;    
    } 
    .fixframe iframe {
       height: 100%;
       width: 100%;  
    } 


## [Working Demo in fiddle][fiddle]


**See Also**:

* [position:fixed inside of an iframe][SO1]
* [iframe with a css fixed position : possible?][SO2]
* [position fixed div in iframe not working][SO3]

[fiddle]: http://jsfiddle.net/KyleMit/SKhQY/show/

[SO1]: https://stackoverflow.com/q/8304148/1366033
[SO2]: https://stackoverflow.com/q/4195971/1366033
[SO3]: https://stackoverflow.com/q/7609062/1366033

When embedding a Bootstrap app in an iframe, modal dialogs always open at the top of the iframe, not the top of the screen. As an example, go to http://getbootstrap.com/javascript/ and open an example modal on the page. Then using the sample code below which places the same bootstrap page in an iframe, find a modal and open it:

    <html>
        <head>
        </head>
        <body>
            <table width="100%">
                <tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
                <tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
                    <td valign="top">
                        <iframe width="100%" height="10000px" 
                            scrolling="no" src="http://getbootstrap.com/javascript/">
                        </iframe>
                    </td>
                </tr>
            </table>
        </body>
    </html>

[Demo in fiddle](http://jsfiddle.net/uAqnU/3/show/)


How do I go about positioning the modal on the screen in this scenario? 

**UPDATE:** Unfortunately, my iFrame cannot fill the screen, nor can I make it fixed since it needs to blend into the rest of the page and the page itself has enough content to scroll. This is not my design and I ultimately intend to rework the whole thing, but this is what I have to work around for now. As a temporary option, I'm using javascript to tell the iframe parent to scroll to the top where the modal dialog pops up. While this is acceptable, this isn't the desired behavior.

I'm using angularjs and the ui-bootstrap library in my code but as you can see above, it's a bootstrap issue.

Bootstrap modal at top of iframe regardless of scroll position. How do I position it on screen?

No. There is no way to extend content outside of an iframe. Think of it as another browser window entirely. 

The reason that the options will extend below the iframe is that form elements follow their own rules. They differ from browser to browser, and for some of the elements you can't change the styling. When you use select2 it turns the form into a regular element (not a default form element), so you can manipulate the style. Unfortunately, this also makes it confine to the iframe.

Consider that a browser can also do this (*but it doesn't mean you can*):

[![Example](http://i.imgur.com/xcbN5UH.png)](http://run.plnkr.co/plunks/kALp3qUudQ4UHBWvEFbA/select.html)

Is it possible to extend content beyond the bounds of an iframe?

In my case, I was formerly rendering a native `<select>` control inside of an iframe.  As a native control, when it rendered, the dropdown was able to occupy space outside of the iframe.  I recently converted the dropdown to use [select2][select2], which rebuilds the dropdown using various `<span>` elements.

The problem is now it gets cutoff within the `<iframe>`:

[![Demo][screenshot]][run.plunk]

I've tried setting the overflow to visible, but that doesn't work:



    iframe {
       overflow: visible
    }

### [Here's a Test Case on Plunker][plunk]

**JavaScript**:



    $("#OpenSelect2").click(function(){
     OpenPagePopup("select2.html", "Select 2", 150, 400);
    });

    //Open Diagnosis Control for editting
    function OpenPagePopup(location, title, ht, wt) {
      $('<div>')
          .append($('<iframe/>', {
              'class': "fullFrame",
              'src': location
          }))
          .dialog({
              autoOpen: true,
              modal: true,
              height: ht,
              width: wt,
              title: title
          });
    }


**index.html**:



    <button id="OpenSelect2">Open Modal with Select2</button>

**select2.html**:



    <select class="select2">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
    </select>
    
    <script >
      $('.select2').select2();
    </script>

### Possible Workaround:

**DON'T USE IFRAMES**! Yeah, I know, I know, but this is the [situation][SO1] I find myself maintaining.

[screenshot]: http://i.imgur.com/S6PvAaA.png
[plunk]: http://plnkr.co/edit/kALp3qUudQ4UHBWvEFbA/
[run.plunk]: http://run.plnkr.co/plunks/kALp3qUudQ4UHBWvEFbA/

[select2]: https://select2.github.io/
[SO1]: https://stackoverflow.com/a/14021220/1366033

Extend div outside bounds of iFrame?

Here are the IFrame player docs with the [**officially supported parameters**][1] along with [revision history][1b]

> * `modestbranding` - 	This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.
> * `showinfo` - was deprecated in 2018


**See Also**:

* [modestbranding not working for YouTube embed][2]
* [About Youtube iframe caption ,title, modestbranding problem][3]
* [How can I remove the youtube branding completely from embedded video?][4]

[1]: https://developers.google.com/youtube/player_parameters#Parameters
[1b]: https://developers.google.com/youtube/player_parameters#Revision_History
[2]: https://stackoverflow.com/q/40353582/1366033
[3]: https://stackoverflow.com/q/64780850/1366033
[4]: https://stackoverflow.com/q/20099545/1366033

I want to display YouTube video in my android application with the parameter modestbranding=1 and showinfo=0 in webview. When I tried this,then modestbranding doesn't work any more.

if i remove showinfo then modestbranding parameter is working and vice versa.

https://www.youtube.com/embed/ANdeRJF7MWo?modestbranding=1&showinfo=0&rel=0

I search alot but did not find its solution. Please help 