Fullscreen API using JavaScript
Last Updated :
14 Jul, 2021
The window supports the full-screen interface by using web API. We can activate or deactivate the full-screen mode of the screen. The fullscreen API provides methods to present a specific element in a full-screen mode.
Approach:
- The onclick event will trigger the activate() method which will be for activating the full screen.
- The same will be applied for exiting from the full screen.
<button onclick="activate(document.documentElement);">
Go To Full Screen
</button>
<button onclick="deactivate();">
Leave Full Screen
</button>
Example: The following code uses the requestFullscreen() method. The same is done for exiting full screen by using exitFullscreen() method.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</ head >
< body >
< h1 style = "color: green" >GeeksForGeeks</ h1 >
< h2 >Window fullscreen property</ h2 >
< button onclick = "activate(document.documentElement);" >
Go To Full Screen
</ button >
< button onclick = "deactivate();" >Leave FullScreen</ button >
< script >
// Function for full screen activation
function activate(ele) {
if (ele.requestFullscreen) {
ele.requestFullscreen();
}
}
// Function for full screen activation
function deactivate() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
</ script >
</ body >
</ html >
|
Output:
activate or deactivate full screen
Application:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...