Skip to content

Instantly share code, notes, and snippets.

@wynemo

wynemo/fullscreen.html

Created March 7, 2018 06:42
Show Gist options
  • Save wynemo/29cfa6fc396c5cf24bc3d140b7a799bc to your computer and use it in GitHub Desktop.
Save wynemo/29cfa6fc396c5cf24bc3d140b7a799bc to your computer and use it in GitHub Desktop.
Download ZIP
make some website in full screen
Raw
fullscreen.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.min.js"></script>
</head>
<body>
<div>
<button id="mybutton">click me</button>
</div>
<script>
$('#mybutton').click(() => {
if (screenfull.enabled) {
screenfull.request();
}
const iframe = document.createElement('iframe');
iframe.setAttribute('id', 'external-iframe');
iframe.setAttribute('src', 'http://play.grafana.org/playlists/play/6');
iframe.setAttribute('frameborder', 'no');
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.right = '0';
iframe.style.bottom = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
$(document.body).prepend(iframe);
document.body.style.overflow = 'hidden';
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment