Above is a basic fullscreen button demo / example. This one adds the fullscreen button only if it is supported by the device, and creates the icon using CSS only.
You can also right-click on the link above and select ‘Save Link As…’ (or similar) to download the entire demo as a single html file.
Here is the Javascript:
const document_element = document.documentElement;
if (document.fullscreenEnabled || /* Standard syntax */
document.webkitFullscreenEnabled || /* Safari */
document.msFullscreenEnabled/* IE11 */)
{
create_fullscreen_button();
}
function create_fullscreen_button() {
let fullscreen_button = document.createElement("button");
fullscreen_button.setAttribute('id','fullscreen-button');
fullscreen_button.addEventListener("click", toggle_fullscreen);
fullscreen_button.innerHTML = `
<span></span>
<span></span>
<span></span>
<span></span>
`;
document.body.appendChild(fullscreen_button);
}
function toggle_fullscreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
document.body.setAttribute("fullscreen","")
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
document.body.removeAttribute("fullscreen")
}
}
function check_fullscreen() {
// Because users can exit & enter fullscreen differently
if (document.fullscreenElement
|| document.webkitIsFullScreen
|| document.mozFullScreen) {
document.body.setAttribute("fullscreen","")
}
else {
document.body.removeAttribute("fullscreen")
}
}
setInterval(function(){ check_fullscreen();}, 1000);
Here is the CSS:
/* Fullscreen Button
------------------------------*/
#fullscreen-button {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0,0,0,0.05);
border: 0;
width: 40px;
height: 40px;
border-radius: 50%;
box-sizing: border-box;
transition: transform .3s;
font-size: 0;
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
#fullscreen-button:hover {
transform: scale(1.125);
}
#fullscreen-button span {
width: 4px;
height: 4px;
border-top: 2.5px solid #111; /* color */
border-left: 2.5px solid #111; /* color */
position: absolute;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
-webkit-perspective: 1000;
transition: .3s;
transition-delay: .75s;
}
#fullscreen-button span:nth-child(1) {
top: 11px;
left: 11px;
}
#fullscreen-button span:nth-child(2) {
top: 11px;
left: 22px;
transform: rotate(90deg);
}
#fullscreen-button span:nth-child(3) {
top: 22px;
left: 11px;
transform: rotate(-90deg);
}
#fullscreen-button span:nth-child(4) {
top: 22px;
left: 22px;
transform: rotate(-180deg);
}
/* Fullscreen True
------------------------------*/
[fullscreen] #fullscreen-button span:nth-child(1) {
top: 22px;
left: 22px;
}
[fullscreen] #fullscreen-button span:nth-child(2) {
top: 22px;
left: 11px;
}
[fullscreen] #fullscreen-button span:nth-child(3) {
top: 11px;
left: 22px;
}
[fullscreen] #fullscreen-button span:nth-child(4) {
top: 11px;
left: 11px;
}
/* Dark Style
------------------------------*/
[light-mode=dark] {
background: #111;
color: #fff;
}
[light-mode=dark] #fullscreen-button {
background: rgba(255,255,255,.05);
}
[light-mode=dark] #fullscreen-button span {
border-top: 2.5px solid #fff;
border-left: 2.5px solid #fff;
}
P.S. If by chance you want to see it in dark mode style, you could set light-mode=”dark” on the body tag in the inspector. 🙂
If you would like to stay in the loop when I publish new content your best bet is to join my mailing list, as I don't tend to post my tutorials and articles to social media. Otherwise you can always follow my work on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn, and Behance.