<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#interesting {
background: yellow;
padding: 1em 1.5em;
display: inline-block;
font: 1em/1.3 Helvetica, Arial, sans-serif;
text-align: center;
cursor: pointer;
}
#interesting p { margin-top: -1.5em; }
</style>
<title></title>
</head>
<body>
<div id="interesting">
<h1>Very interesting</h1>
<p>(Click me to toggle fullscreen)</p>
</div>
<script src="fullscreen-api-polyfill.js"></script>
<script>
var interesting = document.getElementById("interesting");
// Check if this browser support the fullscreen API
if (typeof document.fullscreenEnabled !== undefined) {
// Register a click handler for the <div>
interesting.addEventListener("click", function() {
// Toggle fullscreen
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
this.requestFullscreen();
}
}, false);
}
</script>
</body>
</html>