Fullscreen javascript API

In this example below you will see how to do a Fullscreen javascript API with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by retyui, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright retyui ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Fullscreen javascript API </title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="test-elm">
	<p>Fullscreen javascript API Domo! <a href="https://github.com/neovov/Fullscreen-API-Polyfill">Polyfill</a> </p>
	<button type='button' id="toggle-btn">Toggle Fullscreen</button>
</div>
  <script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script>
<script src='https://cdn.rawgit.com/neovov/Fullscreen-API-Polyfill/56d16539/fullscreen-api-polyfill.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/retyui/fullscreen-javascript-api-rYZRWP */
/* @use postcss-extend; */

#test-elm{
	display: flex;
	align-items: center;
	justify-content: center;
	background: gold
/* 	&:full-screen{
		width: 100%;
		height: 100%;
	} */
}

#test-elm:-webkit-full-screen{
	width: 100%;
	height: 100%;
}

#test-elm:-moz- full-screen{
	width: 100%;
	height: 100%;
}




	



/*Downloaded from https://www.codeseek.co/retyui/fullscreen-javascript-api-rYZRWP */
// Polyfill : https://github.com/neovov/Fullscreen-API-Polyfill

var btn = window['toggle-btn'];
var elm = window['test-elm'];

var stateFullscreen = true;

btn.addEventListener('click', function (e) {
	stateFullscreen = !stateFullscreen;
	if (stateFullscreen) {
		document.exitFullscreen();
	} else {
		elm.requestFullscreen();
	}
});

Comments