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?
Embedding webpages using an IFrame. An IFrame is HTML code that you can use to embed one HTML page, PDF page, another website, or other web safe file into a another webpage inside a window. The window can be styled using css code. IFrames do not make a website a "framed" site and do not affect SEO.
Iframes Bring Security Risks. If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in.
We can use the object tag in HTML to embed external resources in the webpage. We can use the tag to display another webpage in our webpage. The object tag is an alternative to the iframe tag in HTML. We can use the tag to embed different multimedia components like image, video, audio, etc.
The reason why external websites such as:
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With