Skip to content

Instantly share code, notes, and snippets.

@zulhfreelancer

zulhfreelancer/index.html

Created February 8, 2016 18:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save zulhfreelancer/aa4f3be71ddafcba12a6 to your computer and use it in GitHub Desktop.
Save zulhfreelancer/aa4f3be71ddafcba12a6 to your computer and use it in GitHub Desktop.
Download ZIP
How to load external website page using iFrame with a fixed top bar? // Demo: http://embed.plnkr.co/iQQPh92IMjCUoeKK6dac/ // Reference: https://perishablepress.com/embed-external-content-via-iframe-and-div/
Raw
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position:absolute; left:77; top:77; width:377; height:377; clip:rect(0,381,381,0); background:#FFF;">
<div class="fixed">FIXED NAVIGATION BAR</div>
<iframe id="x" src="PUT_THE_WEBPAGE_URL_HERE" width="600" height="800" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes">
</iframe>
</div>
</body>
</html>
Raw
style.css
html {
background:black;
}
.fixed {
position:fixed;
height:30px;
background:#fff;
}
#x {
margin-top:30px;
}
@amauryvh
Copy link

amauryvh commented Jul 10, 2017 •
edited

Is not working for me. I downloaded the file and just changed PUT_THE_WEBPAGE_URL_HERE for my url and is not working. Is not working with any url. Any idea?

@hortom
Copy link

hortom commented Jul 9, 2018

Try this answer from stackoverflow.
"The reason why external websites such as:
youtube.com
google.com
stackoverflow.com
etc.
are not loading in your frame, is because they are intentionally leveraging some sort of Frame Killer."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment