html knowhow

Iframe zum Vollbildschirm

So sieht´s aus

Quellcode

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style type="text/css">
.iframe {margin-bottom: 45px; border: 3px solid #131C28; overflow: hidden; background: #fff;}
.iframe iframe {width: 100%; height: 400px; border: 0; display: block;}
.iframe-header {display: none;}
.js .iframe-header {display: block;}
.iframe-content {height: 400px; overflow: auto; -webkit-overflow-scrolling: touch;}
.iframe-header a {font-size: 15px; color: white; background: #3B4658; display: block; padding: 15px; text-align: center; border-bottom: 3px solid #131C28;}
.iframe-header a:hover,
.iframe-header a:focus {background: #6A798E;}
.iframe-full-screen .iframe-header {display: block; position: absolute; height: 50px; width: 100%;}
.iframe-full-screen .iframe-content {position: absolute; top: 50px; bottom: 0; width: 100%; height: auto;}
.iframe-full-screen .iframe-header a {padding: 0; height: 44px; line-height: 44px; text-align: center; border: 3px solid #131C28;}
.iframe-full-screen body {width: 100%; height: 100%; overflow: hidden;}
.iframe-full-screen .iframe.iframe-active{width: 100%; height: 100%; position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 9999; border: none;}
.iframe-full-screen .iframe iframe {position: absolute; height: 100%; width: 100%; border: none;}
.wrapper {max-width: 1000px; margin: 20px auto; padding: 0 20px;}

@media all and (max-height: 400px){
.iframe {height: 300px;} }
</style>
</head>

<body >
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.getElementsByTagName("html")[0].className = "js";
</script>
</head>
<body>
<div class="wrapper">
<div class="iframe">
<iframe src="http://meinsolargarten.de" target="_self" /></iframe>
</div>
</div>
</body>
</html>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
<script>
$(document).ready(function(){
$('.iframe').responsiveIframes({ openMessage: "Vollbildschirm öffnen", closeMessage: "Vollbildschirm schließen" });
});
(function($){
$.responsiveIframes = function(el, options){
var self = this;
self.$el = $(el);
self.el = el;
self.$el.data("responsiveIframes", self);

self.init = function () {
self.options = $.extend({}, $.responsiveIframes.defaultOptions, options);
var iframeSrc = self.$el.find('iframe').wrap('<div class="iframe-content" />').attr('src');
var header = '<div class="iframe-header">' +
'<a href="'+ iframeSrc +'" class="iframe-trigger">'+ self.options.openMessage +'</a>' +
'</div>';
var trigger = self.$el.prepend(header).find('.iframe-trigger');
$(trigger).click(function (e) {
e.preventDefault();
var $this = $(this),
$html = $('html'),
isFullScreen = $html.hasClass("iframe-full-screen"),
message = isFullScreen ? self.options.openMessage : self.options.closeMessage;
$this.text(message);
if (isFullScreen) {
self.$el.removeClass("iframe-active");
$html.removeClass("iframe-full-screen");
setTimeout(function () {
$(window).scrollTop($this.data('iframe-scroll-position'));
}, 1);
} else {
$this.data('iframe-scroll-position', $(window).scrollTop());
self.$el.addClass("iframe-active");
$html.addClass("iframe-full-screen");
}
});
};
self.init();
};
$.responsiveIframes.defaultOptions = {
openMessage: "Full screen",
closeMessage: "Close"
};
$.fn.responsiveIframes = function(options){
return this.each(function(){
(new $.responsiveIframes(this, options));
});
};
})(jQuery);
</script>
</body>

</html>

Kontakt Datenschutz Impressum