HTML Fullscreen API

Control fullscreen mode programmatically

🖥️ What is the Fullscreen API?

The Fullscreen API allows you to display any element in fullscreen mode. Perfect for media players, games, presentations, and immersive experiences. 


// Enter fullscreen mode
const element = document.getElementById('myElement');
await element.requestFullscreen();

// Exit fullscreen mode
await document.exitFullscreen();

// Check if in fullscreen
const isFullscreen = document.fullscreenElement !== null;

Try it:

Fullscreen Demo Area

Click the button below to make this area fullscreen!

Fullscreen API Features

📱

Any Element

Make any HTML element fullscreen 

const video = document.querySelector('video');
await video.requestFullscreen();
🎮

User Control

Users can exit with Escape key 

document.addEventListener('fullscreenchange', 
    () => console.log('Fullscreen changed')
);
🔍

State Detection

Check current fullscreen status 

const isFullscreen = 
    document.fullscreenElement !== null;
🎬

Media Support

Perfect for videos and presentations 

videoElement.addEventListener('click', 
    () => videoElement.requestFullscreen()
);

🔹 Basic Fullscreen Operations

Here's how to implement fullscreen functionality: 

// Enter fullscreen mode
async function enterFullscreen(element) {
    try {
        if (element.requestFullscreen) {
            await element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) { // Safari
            await element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) { // IE/Edge
            await element.msRequestFullscreen();
        }
    } catch (err) {
        console.error('Error entering fullscreen:', err);
    }
}

// Exit fullscreen mode
async function exitFullscreen() {
    try {
        if (document.exitFullscreen) {
            await document.exitFullscreen();
        } else if (document.webkitExitFullscreen) { // Safari
            await document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
            await document.msExitFullscreen();
        }
    } catch (err) {
        console.error('Error exiting fullscreen:', err);
    }
}

// Check if fullscreen is supported
function isFullscreenSupported() {
    return !!(
        document.fullscreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled
    );
}

Try Different Elements:

Demo image

Text Content

This is a text container that can also go fullscreen for reading mode.

🔹 Fullscreen Event Handling

Listen for fullscreen changes and handle them appropriately: 

// Listen for fullscreen changes
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
document.addEventListener('msfullscreenchange', handleFullscreenChange); // IE/Edge

function handleFullscreenChange() {
    const fullscreenElement = 
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;
    
    if (fullscreenElement) {
        console.log('Entered fullscreen mode');
        // Add fullscreen-specific styling or behavior
        fullscreenElement.classList.add('fullscreen-active');
    } else {
        console.log('Exited fullscreen mode');
        // Remove fullscreen-specific styling
        document.querySelectorAll('.fullscreen-active').forEach(el => {
            el.classList.remove('fullscreen-active');
        });
    }
}

// Handle fullscreen errors
document.addEventListener('fullscreenerror', (event) => {
    console.error('Fullscreen error:', event);
    alert('Unable to enter fullscreen mode');
});
/* CSS for fullscreen styling */
.fullscreen-active {
    background: black !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fullscreen-active img {
    max-width: 90vw !important;
    max-height: 90vh !important;
    object-fit: contain !important;
}

🔹 Practical Example: Video Player

Create a video player with fullscreen controls: 

<!-- HTML -->
<div class="video-player">
    <video id="myVideo" controls>
        <source src="video.mp4" type="video/mp4">
    </video>
    <div class="video-controls">
        <button onclick="toggleVideoFullscreen()">⛶ Fullscreen</button>
        <button onclick="togglePlay()">▶️ Play/Pause</button>
    </div>
</div>
// JavaScript
let isVideoFullscreen = false;

async function toggleVideoFullscreen() {
    const video = document.getElementById('myVideo');
    
    try {
        if (!isVideoFullscreen) {
            await video.requestFullscreen();
        } else {
            await document.exitFullscreen();
        }
    } catch (err) {
        console.error('Fullscreen toggle failed:', err);
    }
}

function togglePlay() {
    const video = document.getElementById('myVideo');
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}

// Update fullscreen state
document.addEventListener('fullscreenchange', () => {
    isVideoFullscreen = document.fullscreenElement !== null;
    updateFullscreenButton();
});

function updateFullscreenButton() {
    const button = document.querySelector('[onclick="toggleVideoFullscreen()"]');
    button.textContent = isVideoFullscreen ? '⛷ Exit Fullscreen' : '⛶ Fullscreen';
}

Try it:

▶️

🧠 Test Your Knowledge

How can users exit fullscreen mode?