iframe and external website

Question

So I have this code:

<iframe id="theFrame" src="http://localhost" style="width:100%;" frameborder="0">
</iframe>

and the localhost site loaded in the iframe just fine..

but then when I change the src to an external website

<iframe id="theFrame" src="http://www.youtube.com" style="width:100%;" frameborder="0">
</iframe>

The website did not load.

What did I do wrong? I know that you can use external websites in an iframe since Google Image Search does so...

How can I get external sites to work in my iframe?

Answer 1

The reason why external websites such as:

1. youtube.com
2. google.com
3. stackoverflow.com
4. etc.

are not loading in your frame, is because they are intentionally leveraging some sort of Frame Killer.

Example (uses jQuery):

<style> html{display:none;} </style>
<script type="text/javascript">
    $(document).ready(function () {
        if(window.self == window.top) {
            document.documentElement.style.display = 'block'; }
        else {
       window.top.location = window.self.location; }
    });
</script>

Suggested reading:

• Framekiller (Wikipedia)
• Busting a tough FRAME killer

Answer 2

It appears to be a youtube-only problem; src="http://www.mozilla.org" works for me in your code. If you want to display youtube videos in iframes, they'll probably want you to use "embed" option on the video page?

Answer 3

You are probably experiencing the same issues I am having, Most likely the iframe is being blocked by the X-frame-options or being blocked by the Deny property. For example if you access facebook from an outside source it will come back with a DENY response in google chrome