---
title: Fullscreen Events
author: Kong Her
description: An overview of fullscreen events, it's utilization and how to catch any errors
published: 2025-2-17
---
# `fullscreenchange` and `fullscreenerror` Events
## What are these Events?
The `fullscreenchange` and `fullscreenerror` events are part of the Fullscreen API in JavaScript. These events allow developers to monitor changes in fullscreen mode and handle potential errors.
- **`fullscreenchange`**: This event triggers whenever the document enters or exits fullscreen mode, enabling developers to adjust UI elements accordingly.
- **`fullscreenerror`**: This event triggers when an error occurs while attempting to enter or exit fullscreen mode. This helps detect issues, such as when a browser restricts fullscreen access due to security policies.
## Why Would I Use These Events?
1. Enhance user experience by modifying the UI in fullscreen mode.
2. Detect and handle fullscreen errors gracefully when fullscreen mode is unsupported.
3. Improve usability in media applications that rely on fullscreen mode.
## Research Sources
Here are some useful resources for understanding these events:
- [Fullscreenchange Event - W3Schools](https://www.w3schools.com/jsref/event_fullscreenchange.asp)
- [Fullscreenerror Event - W3Schools](https://www.w3schools.com/jsref/event_fullscreenerror.asp)
- [Using the Fullscreen API - FreeCodeCamp](https://www.freecodecamp.org/news/how-to-use-the-javascript-fullscreen-api/)
## Code Examples
### Basic `fullscreenchange` Event Listener
The following example toggles fullscreen mode and updates the UI when fullscreen mode changes.
```html
Fullscreenchange Example
Fullscreen status: Not active
```
### Handling `fullscreenerror` Events
This example demonstrates handling errors when attempting to enter fullscreen mode. It also includes an error message output to indicate why fullscreen mode failed.
```html
Fullscreenerror Example
```
## Example of a Fullscreen Error
To give some examples of how an error could occur, here’s some scenarios:
- A browser may block fullscreen mode if the request is not triggered by a user gesture (e.g., clicking a button).
- Some devices or browser settings restrict fullscreen mode to specific domains or require explicit user permissions.
- Trying to enter fullscreen mode on an iframe from a different domain without the correct permissions may trigger a `fullscreenerror`.
### Example Error Output in Console
If fullscreen mode fails, the following error message may appear in the browser’s developer console:
```
Uncaught (in promise) TypeError: fullscreen request was denied because it was not triggered by user activation.
```
To prevent this error, ensure the request is made inside an event handler (e.g., inside a `click` event listener).
## Conclusion
- `fullscreenchange` is useful for updating the UI when fullscreen mode changes.
- `fullscreenerror` is essential for handling and debugging fullscreen failures.
- Understanding common fullscreen issues can help prevent errors and improve user experience.
By implementing these best practices, developers (that's us) can create more seamless fullscreen experiences while minimizing potential issues.