Google trends Public Holidays Coupon Code Code Compiler

How to make a fullscreen window with JavaScript

Apr 13, 2019

How to make a fullscreen window with JavaScript

The Fullscreen API is allows web page or HTML element to viewed in fullscreen mode, and hiding all browser user interface and other applications from the window screen. You can use this API to bring images, videos and other content to a users full attention.

You can get to full screen mode from two ways. You can have the window simply open full screen by pressing F11 key or set up a button or link that will open the window in full screen.

A full screen is a mode where a document or element is displayed on the entire device screen. The full screen mode best fits with video element, iframe element, slideshow galleries etc


<div id="element_wrapper">
		<label>Learn how to make a fullscreen window with JavaScript</label>
		<button id="button">Enable Full Screen</button>

CSS Code

#element_wrapper {
	    margin: auto;
    height: 100%;
    width: 50%;
    background-color: #e2f9d0;
    font-size: 24px;
    text-align: center;
    padding-top: 50px;

#button {
	width: 200px;
    display: block;
    margin: 60px auto;
    background: #16425D;
    color: #fff;
    border: 1px solid #16425D;
    padding: 10px;
	cursor: pointer;
#element_wrapper:-ms-fullscreen {
	background-color: #e7ffc0;
	margin: 0;
#element_wrapper:-webkit-full-screen {
	width: 100%;
	height: 100%;
	background-color: pink;
	margin: 0;
#element_wrapper:fullscreen { 
	background-color: #e7ffc0;
	margin: 0;
#element_wrapper:-moz-full-screen {
	background-color: #e7ffc0;
	margin: 0;


/* Go to full screen */
function Fullscreen(element) {
	else if(element.mozRequestFullScreen)
	else if(element.webkitRequestFullscreen)
	else if(element.msRequestFullscreen)

$("#button").on('click', function() {

$(document).on('fullscreenchange MSFullscreenChange mozfullscreenchange webkitfullscreenchange', function() {
	var full_screen_element_check = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
	if(full_screen_element_check != null){
		$("#button").hide(); // If full screen is enabled
		$("#button").show(); // If full screen is disabled

Copyright 2024. All rights are reserved