iframe and external website

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

If you run the code snippet below:

<iframe src="https://www.youtube.com"></iframe>

Then look at dev tools, it will throw the error:

Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

This is because the site you are trying to access limits embedding (via iframe, frame, embed, object) to the same origin using the X-Frame-Options header. So youtube.com can load iframes with youtube.com pages just fine, but nobody else can. Only site admins for the embedded site can change that setting.

If you have admin for the site you are embedding, you can whitelist the the host site:

X-Frame-Options: allow-from https://my-host-site.com/

This has to be sent as a HTTP Header by the server of the page you are trying to embed. It will not work as a meta tag inside the HTML head. This is how the browser knows the site you are embedding ok'd the site that is hosting to show the page in the iframe.