How to detect when an element enters or exits fullscreen mode?

Answers:

To detect when an element enters or exits fullscreen mode in a web application, you can use the Fullscreen API in combination with the event listeners for the fullscreenchange event. Here’s how you can implement this:

Basic Setup

Entering Fullscreen: Use the requestFullscreen() method to make an element enter fullscreen.
Exiting Fullscreen: Use exitFullscreen() to exit fullscreen mode.
Detect Change: Listen to the fullscreenchange event, which is fired whenever the fullscreen state of the document changes.

Example Code

Here is a basic example to demonstrate how to detect when an element enters or exits fullscreen mode.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen API Example</title>
    <style>
        #myElement {
            width: 300px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="myElement">Click me to go Fullscreen!</div>

<script>
    const myElement = document.getElementById('myElement');

    // Function to enter fullscreen
    function enterFullscreen() {
        if (myElement.requestFullscreen) {
            myElement.requestFullscreen();
        } else if (myElement.mozRequestFullScreen) { // Firefox
            myElement.mozRequestFullScreen();
        } else if (myElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
            myElement.webkitRequestFullscreen();
        } else if (myElement.msRequestFullscreen) { // IE/Edge
            myElement.msRequestFullscreen();
        }
    }

    // Exit fullscreen function
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { // Firefox
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
            document.msExitFullscreen();
        }
    }

    // Event listener for fullscreen change
    document.addEventListener('fullscreenchange', onFullscreenChange);
    document.addEventListener('mozfullscreenchange', onFullscreenChange);
    document.addEventListener('webkitfullscreenchange', onFullscreenChange);
    document.addEventListener('msfullscreenchange', onFullscreenChange);

    function onFullscreenChange() {
        if (document.fullscreenElement) {
            console.log('Element has entered fullscreen mode.');
        } else {
            console.log('Element has exited fullscreen mode.');
        }
    }

    // Click event to toggle fullscreen
    myElement.addEventListener('click', function() {
        if (!document.fullscreenElement) {
            enterFullscreen();
        } else {
            exitFullscreen();
        }
    });
</script>

</body>
</html>

Explanation:

The #myElement div can be clicked to toggle fullscreen mode.
The enterFullscreen function checks for browser compatibility and requests fullscreen on the specified element.
The exitFullscreen function does the same but exits the fullscreen mode.
The fullscreenchange event and its vendor-prefixed variants are added to detect when the document's fullscreen state changes.
When the state changes, the onFullscreenChange function logs whether the element has entered or exited fullscreen mode.

Browser Compatibility:

Make sure to test and apply vendor prefixes as some browsers may implement the Fullscreen API differently (as shown in the example).