allowfullscreen
an HTML attribute for the iframe tag

How do I use the Fullscreen API in JavaScript?

Answers:

  • The Fullscreen API allows web applications to present content in a fullscreen mode, providing a more immersive experience, especially for multimedia or interactive applications. Here's how to use the Fullscreen API in JavaScript:

    Steps to Use the Fullscreen API

    1. Check for Fullscreen Support: Not all browsers support the Fullscreen API, so it's a good idea to check for compatibility.

    2. Entering Fullscreen: You can use the requestFullscreen() method to make an element go fullscreen.

    3. Exiting Fullscreen: The exitFullscreen() method is used to exit fullscreen mode.

    4. Listening for Events: You can listen for fullscreenchange events to know when an element enters or exits fullscreen mode.

    Example Code

    Here's an example that demonstrates how to use the Fullscreen API:

    <!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>
        #fullscreenElement {
            width: 100%;
            height: 300px;
            background: lightblue;
            text-align: center;
            line-height: 300px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="fullscreenElement">Click me to go Fullscreen</div>
<button id="exitFullscreenBtn" style="display:none;">Exit Fullscreen</button>

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

    // Check for Fullscreen API support
    function isFullscreenSupported() {
        return document.fullscreenEnabled || 
               document.webkitFullscreenEnabled || 
               document.mozFullScreenEnabled || 
               document.msFullscreenEnabled;
    }

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

    // Exit fullscreen
    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();
        }
    }

    // Toggle fullscreen on click
    fullscreenElement.addEventListener('click', () => {
        if (document.fullscreenElement) {
            exitFullscreen();
        } else {
            enterFullscreen();
        }
    });

    // Listen for fullscreen change events
    document.addEventListener('fullscreenchange', updateFullscreenButton);
    document.addEventListener('webkitfullscreenchange', updateFullscreenButton);
    document.addEventListener('mozfullscreenchange', updateFullscreenButton);
    document.addEventListener('MSFullscreenChange', updateFullscreenButton);

    function updateFullscreenButton() {
        if (document.fullscreenElement) {
            exitFullscreenBtn.style.display = 'block';
            fullscreenElement.style.display = 'none'; // Hide fullscreen area
        } else {
            exitFullscreenBtn.style.display = 'none';
            fullscreenElement.style.display = 'block'; // Show fullscreen area
        }
    }

    // Initial check
    if (!isFullscreenSupported()) {
        alert('Your browser does not support the Fullscreen API.');
    }
</script>
</body>
</html>

    How It Works

    1. Structure: The HTML has a div that, when clicked, will toggle fullscreen mode.
    2. CSS: Provides basic styling for the div.
    3. JavaScript:
      • Checks if the Fullscreen API is supported.
      • Implements the enterFullscreen and exitFullscreen functions.
      • Adds an event listener on the div to handle clicks for entering and exiting fullscreen.
      • Listens for fullscreen change events to update the button state accordingly.

    Conclusion

    You now have a simple implementation of the Fullscreen API in JavaScript. Feel free to customize the styles and functionality to fit your specific use case!

Related Questions: