HTML document.fullscreenEnabled Property: Checking Fullscreen Capability
The document.fullscreenEnabled property in HTML provides a way to determine whether the browser supports fullscreen mode and if it is currently enabled. This property is crucial for web developers who want to create immersive experiences, such as games, video players, or presentations, where utilizing the entire screen is essential. By checking this property, you can ensure that your application gracefully handles situations where fullscreen mode is not available or allowed.
Definition and Purpose
The document.fullscreenEnabled property returns a boolean value:
true: Indicates that the browser supports fullscreen mode and that fullscreen mode is allowed.false: Indicates that either the browser does not support fullscreen mode or that it is disabled (e.g., by browser settings or security policies).
The purpose of this property is to provide a reliable way to detect fullscreen capability before attempting to enter or exit fullscreen mode, preventing errors and enhancing the user experience.
Syntax
The syntax for accessing the document.fullscreenEnabled property is straightforward:
let isFullscreenEnabled = document.fullscreenEnabled;
This property is read-only, meaning you cannot set it to true or false. Its value is determined by the browser’s capabilities and settings.
Values
| Value | Description |
|---|---|
| `true` | Fullscreen mode is supported and enabled. |
| `false` | Fullscreen mode is either not supported or is disabled. |
Examples
Let’s explore some practical examples of how to use the document.fullscreenEnabled property.
Basic Check for Fullscreen Support
This example demonstrates a simple check to see if fullscreen mode is enabled and displays a message accordingly.
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Enabled Check</title>
</head>
<body>
<button id="fullscreenButton">Check Fullscreen Support</button>
<p id="message"></p>
<script>
const fullscreenButton_ex1 = document.getElementById('fullscreenButton');
const message_ex1 = document.getElementById('message');
fullscreenButton_ex1.addEventListener('click', function() {
if (document.fullscreenEnabled) {
message_ex1.textContent = 'Fullscreen mode is supported and enabled.';
} else {
message_ex1.textContent = 'Fullscreen mode is either not supported or disabled.';
}
});
</script>
</body>
</html>
In this example, a button click triggers a function that checks document.fullscreenEnabled and updates a paragraph element with the result.
Conditionally Displaying a Fullscreen Button
This example shows how to display a fullscreen button only if fullscreen mode is supported.
<!DOCTYPE html>
<html>
<head>
<title>Conditional Fullscreen Button</title>
</head>
<body>
<button id="fullscreenButton_ex2" style="display: none;">Enter Fullscreen</button>
<script>
const fullscreenButton_ex2 = document.getElementById('fullscreenButton_ex2');
if (document.fullscreenEnabled) {
fullscreenButton_ex2.style.display = 'block'; // Show the button
fullscreenButton_ex2.addEventListener('click', function() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
document.documentElement.msRequestFullscreen();
}
});
}
</script>
</body>
</html>
In this example, the fullscreen button is initially hidden. If document.fullscreenEnabled is true, the button is displayed and an event listener is attached to it to handle the fullscreen request.
Integrating with a Video Player
This example demonstrates how to integrate fullscreen support into a video player, checking for fullscreen capability before adding the fullscreen button.
<!DOCTYPE html>
<html>
<head>
<title>Video Player with Fullscreen</title>
</head>
<body>
<video id="myVideo" width="640" height="360" controls>
<source src="your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="fullscreenButton_ex3" style="display: none;">Fullscreen</button>
<script>
const video_ex3 = document.getElementById('myVideo');
const fullscreenButton_ex3 = document.getElementById('fullscreenButton_ex3');
if (document.fullscreenEnabled) {
fullscreenButton_ex3.style.display = 'block';
fullscreenButton_ex3.addEventListener('click', function() {
if (video_ex3.requestFullscreen) {
video_ex3.requestFullscreen();
} else if (video_ex3.mozRequestFullScreen) { /* Firefox */
video_ex3.mozRequestFullScreen();
} else if (video_ex3.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
video_ex3.webkitRequestFullscreen();
} else if (video_ex3.msRequestFullscreen) { /* IE/Edge */
video_ex3.msRequestFullscreen();
}
});
}
</script>
</body>
</html>
In this example, the fullscreen button is displayed only if document.fullscreenEnabled is true. When clicked, the video player enters fullscreen mode. Make sure to replace “your-video.mp4” with an actual video file.
Handling Fullscreen Change Events
This example showcases how to listen for fullscreen change events to update the UI accordingly.
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Change Event</title>
</head>
<body>
<button id="fullscreenButton_ex4">Enter Fullscreen</button>
<p id="fullscreenStatus">Fullscreen: false</p>
<script>
const fullscreenButton_ex4 = document.getElementById('fullscreenButton_ex4');
const fullscreenStatus_ex4 = document.getElementById('fullscreenStatus');
fullscreenButton_ex4.addEventListener('click', function() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
document.documentElement.msRequestFullscreen();
}
});
document.addEventListener('fullscreenchange', function() {
fullscreenStatus_ex4.textContent = 'Fullscreen: ' + (document.fullscreenElement !== null);
});
document.addEventListener('mozfullscreenchange', function() { /* Firefox */
fullscreenStatus_ex4.textContent = 'Fullscreen: ' + (document.mozFullScreen !== false);
});
document.addEventListener('webkitfullscreenchange', function() { /* Chrome, Safari and Opera */
fullscreenStatus_ex4.textContent = 'Fullscreen: ' + (document.webkitIsFullScreen === true);
});
document.addEventListener('msfullscreenchange', function() { /* IE/Edge */
fullscreenStatus_ex4.textContent = 'Fullscreen: ' + (document.msFullscreenElement !== null);
});
</script>
</body>
</html>
This example listens for fullscreen change events and updates a paragraph element to indicate whether the page is currently in fullscreen mode.
Browser Support
The document.fullscreenEnabled property is widely supported across modern browsers:
- Chrome
- Firefox
- Safari
- Opera
- Edge
- Internet Explorer 11+
However, it’s always a good practice to test your code across different browsers to ensure consistent behavior. 🧐
Tips and Best Practices
- Always check
document.fullscreenEnabledbefore attempting to enter fullscreen mode. This ensures that your application gracefully handles cases where fullscreen is not supported or allowed. - Use vendor prefixes for fullscreen API methods. Different browsers may use different prefixes (e.g.,
mozRequestFullScreen,webkitRequestFullscreen). - Handle fullscreen change events to update the UI accordingly. This provides a better user experience by reflecting the current fullscreen state.
- Test your fullscreen implementation across different browsers and devices. This helps ensure consistent behavior and identify any browser-specific issues. 🧪
- Consider browser security policies: Fullscreen mode may be restricted by browser settings or security policies, especially in iframes. 🔒
Conclusion
The document.fullscreenEnabled property is a valuable tool for web developers who want to create immersive fullscreen experiences. By checking this property, you can ensure that your application gracefully handles situations where fullscreen mode is not available or allowed, providing a better user experience. Implementing the best practices outlined in this guide will help you create robust and reliable fullscreen functionality in your web applications.
