Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Fullscreen API using JavaScript?
The Fullscreen API is a browser API that allows developers to request fullscreen display from the user, and to exit fullscreen when desired.
Using the Fullscreen API is relatively simple. First, you must check if the browser you are using supports the Fullscreen API. You can do this by checking for the presence of the Fullscreen API's enabled property on the document object.
If the browser does not support the Fullscreen API, you can still provide a fullscreen experience to your users by using another method, such as opening a new browser window.
Assuming the browser does support the Fullscreen API, the next step is to create a function that will request full screen display from the user. This function must be called within a user-initiated event, such as a click event.
Syntax
if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); }
To open the page in fullscreen, we use requestFullscreen() method.
Approach
The requestFullscreen() method is used to request a full-screen display from the user. This method can be called on any element, but it is most commonly called on the document element. We access the whole page using document.documentElement. Then apply the requestFullscreen() method to open the page in full screen mode.
We create a button “Enter Full screen” to be clicked when user need to open in fullscreen. Once the user clicked on the buttom, the document will receive a fullscreenchange event. This event can be used to detect when the document has entered or exited fullscreen mode.
Example
Opening page in full-screen mode
In the example below, we create a Fullscreen API using JavaScript that opens the output window in full screen mode on clicking the button. We also design an exit button to exit full screen.
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <h1>Full Screen API with JavaScript</h1> <p>Click on the "Enter Full Screen" button to open in Fullscreen mode</p> <button onclick="EnterFullScreen();"> Enter Full Screen </button> <button onclick="ExitFullScreen();">Exit Full Screen</button> <p>Click on the "Exit Full Screen" button or press "Esc" key to exit fullscreen</p> <script> function EnterFullScreen() { if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } } function ExitFullScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } } </script> </body> </html>
Example
Opening video in full screen mode
In the example below, we created a Fullscreen API using JavaScript to open the video in full screen mode.
<!DOCTYPE html> <html> <body> <h1>Full Screen API with JavaScript</h1> <p>Click on the "Enter Full Screen" button to open video in full screen mode</p> <button onclick="EnterFullScreen();"> Enter Full Screen </button> <p>Press "Esc" key to exit fullscreen</p> <iframe id="myvideo" src="https://www.youtube.com/embed/Q4O6yxUC_8g?enablejsapi=1"></iframe> <script> var elem = document.getElementById("myvideo"); function EnterFullScreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } } </script> </body> </html>
Browser Compatibility
The Fullscreen API is supported in all major browsers, including Internet Explorer, Firefox, Chrome, Safari, and Opera. However, the Fullscreen API is still a relatively new API, and as such, it is subject to change.
There are a number of benefits to using the Fullscreen API. First, it allows you to provide a more immersive experience to your users. Second, it can help reduce distractions and improve focus. Finally, it can be used to create unique visual effects.
There are a few potential drawbacks to using the Fullscreen API. First, it can be abused by advertisers and other third-party content providers. Second, it can be difficult to design user interfaces that work well in both fullscreen and non-fullscreen mode. Finally, some users may find the fullscreen experience to be disorienting.
The Fullscreen API is a powerful tool that can be used to create unique and immersive user experiences. However, it is important to use the Fullscreen API responsibly and to consider the potential drawbacks before implementing it in your own web applications.
644 Views
