Javascript Fullscreen and exit Fullscreen Example

by Adi Jaya

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="box" id="demo">

    <p>
        Lorem Ipsum....
    </p>
    <p>
        <button onclick="openFullscreen( 'demo' );">Fullscreen</button>
        <button onclick="closeFullscreen();">Exit Fullscreen</button>
    </p>
    
</div>

<p>
Dolor asit amet....
</p>

CSS

html {
    font-family: sans-serif;
}

.box {
    padding: 15px;
    border: 1px solid #ecbdbd;
    margin: 15px 0;
    background: #ffd9d9;
}

JavaScript

//fullscreen
function openFullscreen( id ) {

	var el = document.getElementById( id );
    
	if ( el.requestFullscreen ) {
		el.requestFullscreen();
	} 
    else if ( el.mozRequestFullScreen ) {
		el.mozRequestFullScreen();
	} 
    else if ( el.webkitRequestFullscreen ) {
		el.webkitRequestFullscreen();
	} 
    else if ( el.msRequestFullscreen ) {
		el.msRequestFullscreen();
	}
    else {
    	alert( "Sorry browser not support" );
    }
    
}

//exit fullscreen
function closeFullscreen() {

	var el = document;
    
	if ( el.exitFullscreen ) {
		el.exitFullscreen();
	}
    else if ( el.mozCancelFullScreen ) {
		el.mozCancelFullScreen();
	}
    else if ( el.webkitExitFullscreen ) {
		el.webkitExitFullscreen();
	}
    else if ( el.msExitFullscreen ) {
		el.msExitFullscreen();
	}
    else {
    	alert( "Sorry browser not support" );
    }
    
}