Javascript Full Screen API

jquery

Legacy Content Notice: This post from 2012 demonstrates the Fullscreen API with jQuery and older browser support patterns. While the core concepts remain valid, modern implementations use vanilla JavaScript with better browser support. For comprehensive modern JavaScript development practices, see our Modern JavaScript Development Guide.

The full screen API is an easy way to get the full web content to be displayed on the page. It's very similar to pressing F11 on your keyboard but this can be done at the developers choice. This is a great feature to use for things on slideshows, you can make the browser go into full screen on a click of an image. The best thing about this feature is that it doesn't have to be the entire page, you can make any HTML element go full screen. This means instead of always making the entire page go full screen, just assign the full screen API to an image and on the click of the image you can just focus on the image in full screen.

Full Screen API Support

The Fullscreen API now has excellent browser support across all modern browsers. The vendor prefixes are no longer needed for most use cases.

Modern Browser Support (2024)

  • Chrome/Edge: 71+ (unprefixed)
  • Firefox: 64+ (unprefixed)
  • Safari: 16.4+ (unprefixed)
  • All mobile browsers: iOS Safari 12+, Chrome Mobile 71+

Legacy Browser Support (Historical)

  • Chrome 15+ (with webkit prefix)
  • Firefox 10+ (with moz prefix)
  • Safari 5.1+ (with webkit prefix)
  • Opera 12.50+

Safari 5.1 doesn't support use of the keyboard in fullscreen.

Check If The Browser Supports Full Screen API

Modern approach (2024):

// Simple modern check
if (document.fullscreenEnabled) {
    // Fullscreen is supported
    await document.documentElement.requestFullscreen();
}

Legacy approach with vendor prefixes (historical reference):

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

This uses the method requestFullscreen, if it returns true then you can use the fullscreen API. Both Firefox and Chrome have their own methods for this both are prefixed with moz and webkit, using the functions mozRequestFullScreen and webkitRequestFullScreen. Once these methods have passed you can then use the full screen method.

Exit The Full Screen

Modern approach (2024):

// Simple modern exit
if (document.fullscreenElement) {
    await document.exitFullscreen();
}

Legacy approach with vendor prefixes (historical reference):

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

Styling The Fullscreen API

Modern CSS (2024):

/* Standard fullscreen selector */
:fullscreen {
    background: #000;
    color: white;
}

/* For specific elements in fullscreen */
video:fullscreen {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
}

Legacy CSS with vendor prefixes (historical reference):

html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:fullscreen {
    background: red;
}

Modern Fullscreen Implementation (2024)

Complete Modern Example

class FullscreenManager {
    constructor() {
        this.bindEvents();
    }

    // Check if fullscreen is supported
    static isSupported() {
        return document.fullscreenEnabled;
    }

    // Check if currently in fullscreen
    static isActive() {
        return !!document.fullscreenElement;
    }

    // Request fullscreen for an element
    static async request(element = document.documentElement) {
        if (!this.isSupported()) {
            throw new Error("Fullscreen not supported");
        }

        try {
            await element.requestFullscreen();
        } catch (error) {
            console.error("Error entering fullscreen:", error);
        }
    }

    // Exit fullscreen
    static async exit() {
        if (this.isActive()) {
            try {
                await document.exitFullscreen();
            } catch (error) {
                console.error("Error exiting fullscreen:", error);
            }
        }
    }

    // Toggle fullscreen
    static async toggle(element) {
        if (this.isActive()) {
            await this.exit();
        } else {
            await this.request(element);
        }
    }

    // Bind keyboard event (ESC key handling)
    bindEvents() {
        document.addEventListener("fullscreenchange", () => {
            console.log(
                "Fullscreen state changed:",
                FullscreenManager.isActive()
            );
        });

        document.addEventListener("fullscreenerror", (event) => {
            console.error("Fullscreen error:", event);
        });
    }
}

// Usage examples
const fullscreenManager = new FullscreenManager();

// Make specific element fullscreen
document.querySelector("#my-video").addEventListener("click", async () => {
    const video = document.querySelector("#my-video");
    await FullscreenManager.request(video);
});

// Toggle fullscreen on button click
document.querySelector("#fullscreen-btn").addEventListener("click", () => {
    FullscreenManager.toggle();
});

// Make images fullscreen on click
document.querySelectorAll("img").forEach((img) => {
    img.addEventListener("click", () => {
        FullscreenManager.request(img);
    });
});

Simple Implementation

For basic needs, here's a simpler approach:

// Check support and request fullscreen
async function enterFullscreen(element = document.documentElement) {
    if (document.fullscreenEnabled) {
        await element.requestFullscreen();
    }
}

// Exit fullscreen
async function exitFullscreen() {
    if (document.fullscreenElement) {
        await document.exitFullscreen();
    }
}

// Usage
document.querySelector("#fullscreen-btn").addEventListener("click", () => {
    enterFullscreen();
});

document.querySelector("#exit-btn").addEventListener("click", () => {
    exitFullscreen();
});

Historical Reference: Screenfull.js

The original post mentioned Screenfull.js, which was useful for handling browser inconsistencies. While still available, modern browsers have standardized the API, making vanilla JavaScript sufficient for most cases.

Original Screenfull.js approach (historical reference):

// Legacy approach with Screenfull.js
if (screenfull.isEnabled) {
    screenfull.request();
}

// Legacy jQuery examples
$(function () {
    if (screenfull.isEnabled) {
        $("#supported").text("Yes");
    } else {
        $("#supported").text("No");
    }
});

$("#button").click(function () {
    if (screenfull.isEnabled) {
        screenfull.request($("#target")[0]);
    }
});

$("img").click(function () {
    if (screenfull.isEnabled) {
        screenfull.toggle(this);
    }
});

Key Takeaways

  • Modern browsers support the unprefixed Fullscreen API
  • Use async/await for better error handling
  • Check document.fullscreenEnabled before attempting fullscreen
  • Listen for events to handle state changes and errors
  • Consider user experience - always provide exit mechanisms
Follow Me Subscribe To RSS Feed Subscribe To Email