Skip to content

Instantly share code, notes, and snippets.

@thierrypigot
Created December 22, 2015 21:45
Show Gist options
  • Save thierrypigot/0b74af15329a176f1f29 to your computer and use it in GitHub Desktop.
Save thierrypigot/0b74af15329a176f1f29 to your computer and use it in GitHub Desktop.
Embed external website in full size iframe
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Soref Dictator</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
//function to fix height of iframe!
var calcHeight = function() {
var headerDimensions = $('.preview__header').height();
$('.full-screen-preview__frame').height($(window).height() - headerDimensions);
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
<style>
.full-screen-preview{height:100%;padding:0px;margin:0px;overflow:hidden}.full-screen-preview__frame{width:100%;background-color:#fff}.full-screen-preview__frame.-ios-fix{width:10px;min-width:100%;-webkit-overflow-scrolling:touch;height:100% !important}.preview__header{font-size:12px;height:54px;background-color:#262626;z-index:100;line-height:54px;margin-bottom:1px}.preview__envato-logo{float:left;padding:0 20px}.preview__envato-logo a{display:inline-block;position:absolute;top:18px;text-indent:-9999px;height:18px;width:152px;background:url(//dmypbau5frl9g.cloudfront.net/assets/logos/envato_market-dee06317dbf75d406e29e1cd82fab4dd.svg);-webkit-background-size:152px 18px;background-size:152px 18px}@media (max-width: 568px){.preview__envato-logo{padding:0 10px}.preview__envato-logo a{position:absolute;top:20px;left:15px;height:14px;width:118px;-webkit-background-size:118px 14px;background-size:118px 14px}}.preview__actions{float:right}.preview__action--buy,.preview__action--close{border-left:1px solid #333;display:inline-block;padding:0 20px}@media (max-width: 568px){.preview__action--buy{padding:0 10px}}.preview__action--close a{color:#999;text-decoration:none}.preview__action--close a:hover{color:#fff}.preview__action--close a i{color:#fff;font-size:10px;margin-right:10px}@media (max-width: 568px){.preview__action--close a i{margin-right:0}}@media (max-width: 568px){.preview__action--close a span{display:none}}.screenshots{padding:80px 10px 25px}.screenshots__thumbnail{display:inline-block;margin:0 10px 20px 0;border:1px solid #333;line-height:0}.screenshots__thumbnail:hover{border:1px solid #666}.screenshots__fullsize{display:inline-block;margin:20px 0;border:1px solid #333;line-height:0}.screenshots__fullsize>img{max-width:100%}.screenshots__description{max-width:1004px;margin-top:20px;color:#fff}body{background-color:#000}
</style>
</head>
<body class="full-screen-preview">
<iframe class="full-screen-preview__frame" src="http://thierry-pigot.fr/" name="preview-frame" frameborder="0" noresize="noresize" data-view="fullScreenPreview"></iframe>
<a href="http://www.thierry-pigot.fr" target="_blank">Thierry Pigot</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment