JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
#element {
margin: 40px auto 20px auto;
height: 200px;
width: 400px;
background-color: #e9e9e9;
font-size: 20px;
padding: 40px 0 0 0;
text-align: center;
box-sizing: border-box;
}
#go-button {
width: 200px;
display: block;
margin: 50px auto 0 auto;
}
/* webkit requires explicit width, height = 100% of sceeen */
/* webkit also takes margin into account in full screen also - so margin should be removed (otherwise black areas will be seen) */
#element:-webkit-full-screen {
width: 100%;
height: 100%;
background-color: pink;
margin: 0;
}
#element:-moz-full-screen {
background-color: pink;
margin: 0;
}
#element:-ms-fullscreen {
background-color: pink;
margin: 0;
}
/* W3C proposal that will eventually come in all browsers */
#element:fullscreen {
background-color: pink;
margin: 0;
}
</style>
</head>
<body>
<div id="element">
<span>Full Screen Mode Disabled</span>
<button id="go-button">Enable Full Screen</button>
</div>
</body>
<script>
/* Get into full screen */
function GoInFullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
/* Get out of full screen */
function GoOutFullscreen() {
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
}
/* Is currently in full screen or not */
function IsFullScreenCurrently() {
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement...