HTML Element requestFullscreen() Method: Requesting Fullscreen Mode
The requestFullscreen() method is a powerful feature of the HTML DOM API that allows you to programmatically request that an HTML element be displayed in fullscreen mode. This is particularly useful for enhancing user experiences in applications like video players, games, and image viewers where immersive viewing is desired. This guide will explore the requestFullscreen() method in detail, including its syntax, usage, and practical examples.
What is the requestFullscreen() Method?
The requestFullscreen() method, available on any HTML element, initiates a request to display that element in fullscreen mode. When invoked, the browser attempts to make the specified element fill the entire screen. The user’s browser settings and permissions might influence whether the request is granted.
Purpose of the requestFullscreen() Method
The primary purpose of the requestFullscreen() method is to:
- Enhance user experience by providing immersive viewing of content.
- Allow developers to programmatically control the display of elements in fullscreen mode.
- Enable fullscreen viewing of interactive content such as games, videos, and presentations.
- Provide a consistent fullscreen experience across different browsers and devices.
Syntax of requestFullscreen()
The syntax for using the requestFullscreen() method is straightforward:
element.requestFullscreen(options);
Parameters
| Parameter | Type | Description |
|---|---|---|
| `options` (Optional) | Object |
An optional object that allows you to specify additional parameters for the fullscreen request. Currently, only one option is supported:
|
Return Value
Promise<void>: A promise that resolves when the fullscreen request is successfully processed, or rejects if the request fails.
Examples
Let’s explore some practical examples of how to use the requestFullscreen() method.
Basic Example: Requesting Fullscreen for a Video Element
This example demonstrates how to make a video element enter fullscreen mode when a button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>Request Fullscreen Example</title>
</head>
<body>
<video id="myVideo1" width="640" height="360" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="fullscreenButton1">Go Fullscreen</button>
<script>
const video1 = document.getElementById('myVideo1');
const fullscreenButton1 = document.getElementById('fullscreenButton1');
fullscreenButton1.addEventListener('click', function() {
if (video1.requestFullscreen) {
video1.requestFullscreen();
} else if (video1.mozRequestFullScreen) { /* Firefox */
video1.mozRequestFullScreen();
} else if (video1.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
video1.webkitRequestFullscreen();
} else if (video1.msRequestFullscreen) { /* IE/Edge */
video1.msRequestFullscreen();
}
});
</script>
</body>
</html>
In this example:
- A video element with the ID
myVideo1is defined. - A button with the ID
fullscreenButton1is used to trigger the fullscreen request. - An event listener is attached to the button, which calls
requestFullscreen()on the video element when clicked. - Browser-specific prefixes (
mozRequestFullScreen,webkitRequestFullscreen,msRequestFullscreen) are included for broader compatibility.
Requesting Fullscreen for an Image Element
This example shows how to make an image element enter fullscreen mode.
<!DOCTYPE html>
<html>
<head>
<title>Image Fullscreen Example</title>
</head>
<body>
<img id="myImage2" src="https://www.easygifanimator.net/images/samples/video-to-gif-sample.gif" width="400" height="300" alt="Sample Image">
<button id="fullscreenButton2">View Image in Fullscreen</button>
<script>
const image2 = document.getElementById('myImage2');
const fullscreenButton2 = document.getElementById('fullscreenButton2');
fullscreenButton2.addEventListener('click', function() {
if (image2.requestFullscreen) {
image2.requestFullscreen();
} else if (image2.mozRequestFullScreen) {
image2.mozRequestFullScreen();
} else if (image2.webkitRequestFullscreen) {
image2.webkitRequestFullscreen();
} else if (image2.msRequestFullscreen) {
image2.msRequestFullscreen();
}
});
</script>
</body>
</html>
In this example:
- An image element with the ID
myImage2is defined. - Clicking the
fullscreenButton2triggers therequestFullscreen()method on the image element.
Requesting Fullscreen for a Canvas Element
This example demonstrates how to make a canvas element enter fullscreen mode, useful for games or graphic applications.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Fullscreen Example</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="myCanvas3" width="500" height="300"></canvas>
<button id="fullscreenButton3">Go Fullscreen Canvas</button>
<script>
const canvas3 = document.getElementById('myCanvas3');
const ctx3 = canvas3.getContext('2d');
const fullscreenButton3 = document.getElementById('fullscreenButton3');
// Draw something on the canvas
ctx3.fillStyle = 'lightblue';
ctx3.fillRect(0, 0, canvas3.width, canvas3.height);
ctx3.fillStyle = 'red';
ctx3.font = '48px serif';
ctx3.fillText('Hello Canvas', 50, 150);
fullscreenButton3.addEventListener('click', function() {
if (canvas3.requestFullscreen) {
canvas3.requestFullscreen();
} else if (canvas3.mozRequestFullScreen) {
canvas3.mozRequestFullScreen();
} else if (canvas3.webkitRequestFullscreen) {
canvas3.webkitRequestFullscreen();
} else if (canvas3.msRequestFullscreen) {
canvas3.msRequestFullscreen();
}
});
</script>
</body>
</html>
In this example:
- A canvas element with the ID
myCanvas3is created. - The canvas is filled with a light blue background and some text is drawn on it.
- Clicking the
fullscreenButton3triggers therequestFullscreen()method on the canvas element.
Using the navigationUI Option
This example shows how to use the navigationUI option to control the display of the browser’s navigation UI in fullscreen mode.
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen with NavigationUI Example</title>
</head>
<body>
<div id="myDiv4" style="width:400px; height:300px; background-color: lightgreen;">
<p>This is a div element.</p>
</div>
<button id="fullscreenButton4">Go Fullscreen with Hidden Navigation</button>
<script>
const div4 = document.getElementById('myDiv4');
const fullscreenButton4 = document.getElementById('fullscreenButton4');
fullscreenButton4.addEventListener('click', function() {
const options = { navigationUI: "hide" };
if (div4.requestFullscreen) {
div4.requestFullscreen(options);
} else if (div4.mozRequestFullScreen) {
div4.mozRequestFullScreen(options);
} else if (div4.webkitRequestFullscreen) {
div4.webkitRequestFullscreen(options);
} else if (div4.msRequestFullscreen) {
div4.msRequestFullscreen(options);
}
});
</script>
</body>
</html>
In this example:
- A div element with the ID
myDiv4is styled with a light green background. - The
fullscreenButton4triggers therequestFullscreen()method with thenavigationUIoption set to"hide". - This requests fullscreen mode with the browser’s navigation UI hidden.
Handling Fullscreen Events
It’s important to handle fullscreen change events to adjust your application’s layout and behavior when entering or exiting fullscreen mode.
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Events Example</title>
</head>
<body>
<div id="myDiv5" style="width:400px; height:300px; background-color: lightblue;">
<p>This is a div element.</p>
</div>
<button id="fullscreenButton5">Toggle Fullscreen</button>
<p id="fullscreenStatus5">Fullscreen Status: Off</p>
<script>
const div5 = document.getElementById('myDiv5');
const fullscreenButton5 = document.getElementById('fullscreenButton5');
const fullscreenStatus5 = document.getElementById('fullscreenStatus5');
fullscreenButton5.addEventListener('click', function() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
if (div5.requestFullscreen) {
div5.requestFullscreen();
} else if (div5.mozRequestFullScreen) {
div5.mozRequestFullScreen();
} else if (div5.webkitRequestFullscreen) {
div5.webkitRequestFullscreen();
} else if (div5.msRequestFullscreen) {
div5.msRequestFullscreen();
}
}
});
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
fullscreenStatus5.textContent = 'Fullscreen Status: On';
} else {
fullscreenStatus5.textContent = 'Fullscreen Status: Off';
}
});
</script>
</body>
</html>
In this example:
- A div element with the ID
myDiv5is created. - The
fullscreenButton5toggles fullscreen mode on and off. - The
fullscreenchangeevent listener updates thefullscreenStatus5paragraph to reflect the current fullscreen status. document.fullscreenElementis used to check if any element is currently in fullscreen mode.document.exitFullscreen()is used to exit fullscreen mode.
Browser Support
The requestFullscreen() method is widely supported across modern browsers. However, browser-specific prefixes may still be required for older versions.
| Browser | Support |
| ————— | —————- |
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Opera | Yes |
| Internet Explorer | Yes (with prefix) |
Note: For maximum compatibility, include the browser-specific prefixes (mozRequestFullScreen, webkitRequestFullscreen, msRequestFullscreen) in your code. ⚠️
Tips and Best Practices
- Always check for browser support: Before using
requestFullscreen(), check if the method is supported by the browser to avoid errors. - Handle fullscreen events: Listen for
fullscreenchangeevents to adjust your application’s layout and behavior when entering or exiting fullscreen mode. - Provide a way to exit fullscreen: Always provide a clear and easy way for users to exit fullscreen mode, such as a button or a keyboard shortcut.
- Consider user experience: Ensure that your application provides a smooth and seamless transition to and from fullscreen mode.
- Test on different devices: Test your application on different devices and browsers to ensure that the fullscreen functionality works as expected.
Conclusion
The requestFullscreen() method is a valuable tool for enhancing user experiences by providing immersive viewing of content in web applications. By understanding its syntax, usage, and best practices, you can effectively implement fullscreen functionality in your projects. This guide has provided a comprehensive overview of the requestFullscreen() method, including practical examples and tips for successful implementation.
