Enter full-screen mode

Written byPhuoc Nguyen

Created

22 Sep, 2023

#HTML markup

Let's say we have a layout featuring a button that enables full-screen mode. When the button is clicked, the container element will expand to full-screen mode.

html

<div id="container">
    <button id="full-screen">Full screen</button>
</div>

Before we can go full-screen with JavaScript, we need to make sure the user's browser supports it. We can easily check this using the `document.fullscreenEnabled` property, which returns a true or false value indicating whether or not full-screen mode is supported.

if (document.fullscreenEnabled) {
    // Full-screen mode is supported
} else {
    // Full-screen mode is not supported
}

Once we've confirmed that full-screen mode is supported, we can request it using the `requestFullscreen()` method. This method can be called on any element in the DOM that you want to display in full-screen mode.

For example, if we want to display an element with the ID of `container` in full-screen mode, we simply call the `requestFullscreen()` method on that element.

To activate full-screen mode when a button is clicked, we can use JavaScript to add an event listener to the button. Here's how to handle the button's `click` event:

const container = document.getElementById('container');
const fullScreenButton = document.getElementById('full-screen');

fullScreenButton.addEventListener('click', () => {
    if (document.fullscreenEnabled) {
        container.requestFullscreen();
    }
});

#Exiting full-screen mode

To exit full-screen mode, we can use the `exitFullscreen()` method. This method is called on the `document` object to exit full-screen mode for the entire document:

document.exitFullscreen();

It's important to note that there is no `exitFullscreen()` function available for an element. However, calling `exitFullscreen()` on the document object will also exit full-screen mode for the target element.

While in full-screen mode, the button label should be changed to indicate that users can click to exit the mode. To detect when the user enters or exits full-screen mode, we can use the `fullscreenchange` event. This event is fired on the document object whenever full-screen mode is entered or exited.

document.addEventListener('fullscreenchange', (event) => {
    if (document.fullscreenElement) {
        console.log(`Element: ${document.fullscreenElement} entered full-screen mode`);
    } else {
        console.log('Exited full-screen mode');
    }
});

In this example, we log a message to the console whenever the `fullscreenchange` event is fired. If `document.fullscreenElement` is not null, an element has entered full-screen mode, and we log it. Otherwise, we have exited full-screen mode.

Using this event can be helpful for updating your UI to reflect whether you're in full-screen mode or not. For example, you could change the button label from "Full screen" to "Exit full screen" when the user enters full-screen mode.

document.addEventListener('fullscreenchange', (event) => {
    if (document.fullscreenElement) {
        fullScreenButton.innerHTML = 'Exit Full screen';
    } else {
        fullScreenButton.innerHTML = 'Full screen';
    }
});

Now your users will know exactly how to exit full-screen mode and return to normal browsing!

#Solving cross-browser compatibility issues

While `requestFullscreen()` works with the latest version of modern browsers, older versions of Safari and other WebKit-based browsers require a different method called `webkitEnterFullscreen()`. Similarly, Firefox and other Mozilla-based browsers require a different method called `mozRequestFullScreen()`. Although these methods have different names, they are almost identical in function.

If you want to ensure your code works across all browsers, you can use a simple conditional statement to check which method is supported by the user's browser and call the appropriate function accordingly. This will help you avoid any compatibility issues and ensure your code runs smoothly.

fullScreenButton.addEventListener('click', () => {
    if (document.fullscreenEnabled) {
        if (containerEle.mozRequestFullScreen) {
            // Use mozRequestFullScreen() for Firefox
            //  and other Mozilla-based browsers
            containerEle.mozRequestFullScreen();
        } else if (containerEle.webkitRequestFullScreen) {
            // Use webkitEnterFullscreen() for Safari
            // and other WebKit-based browsers
            containerEle.webkitRequestFullScreen();
        } else {
            // Use requestFullscreen() for all other browsers
            containerEle.requestFullscreen();
        }
    }
});

In this example, to ensure that full-screen mode works correctly in Firefox and other Mozilla-based browsers, we need to check whether the `mozRequestFullScreen()` method exists on our element. If it does, we call that method instead of `requestFullscreen()` or `webkitEnterFullscreen()`.

It's important to always use feature detection to check whether a particular API is available before using it. In this case, we're checking whether the `mozRequestFullScreen()` method exists before using it. This is a best practice to ensure cross-browser compatibility.

Starting from Firefox v64 and Safari v16.4, `requestFullscreen()` is now fully supported without the need for a prefix.

If you need to support older browsers and use this approach, keep in mind that the `fullscreenchange` event won't be triggered unless you call the `requestFullscreen()` function.

#Fixing a black screen in full-screen mode

Have you ever encountered a black screen while using full-screen mode? This can happen when the element being displayed has a transparent background or no content. But don't worry, there's a simple solution! Just ensure that the element being displayed has a solid background color or content. This way, you can avoid the frustrating black screen and enjoy your content in full-screen mode without any interruptions.

css

.container {
    background: #fff;
}

You can add an event listener to handle errors that may occur while entering full-screen mode. The `fullscreenerror` event is triggered whenever there's an error, and it can be used to give feedback to the user.

document.addEventListener('fullscreenerror', (event) => {
    console.error(`An error occurred while trying to enter full-screen mode: ${event.message}`);
});

By adding this event listener, you can provide your users with useful feedback if they encounter any issues while attempting to enter full-screen mode.

Let's wrap up the post with a live demo. Don't miss it!

#See also

Make an element take up the entire page

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn