How to allow Fullscreen Mode easily with JavaScript
Enabling fullscreen mode in web browsers offers several benefits that enhance user experience and usability. One of the primary advantages is the ability to provide users with an immersive experience. By hiding browser controls, toolbars, and other distractions, fullscreen allows users to focus entirely on the content being displayed. This is especially beneficial when viewing multimedia content such as videos, images, or presentations, as it creates a more engaging and immersive viewing experience.
Fullscreen mode also helps optimize the viewing experience by maximizing the use of screen real estate. By occupying the entire screen, websites can deliver content in a more visually appealing and impactful way. This is particularly useful for websites that showcase rich media, interactive applications, or visually intensive designs.
You may also like : Top JavaScript Interview Questions and Answers
Follow this video for complete guidance :
Moreover, enabling fullscreen can improve accessibility for users with visual impairments or those using smaller devices such as tablets or smartphones. By enlarging content to fill the screen, fullscreen makes it easier for users to read text, view images, and interact with interactive elements, without the need for zooming or scrolling.
Additionally, fullscreen can be utilized to create seamless transitions between different sections or views within a web application. For example, when presenting slideshows, online galleries, or interactive maps, fullscreen mode helps maintain continuity and fluidity in the user experience, enhancing usability and engagement.
JavaScript Functions for FullScreen Mode
function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { /* Firefox */ document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE/Edge */ document.msExitFullscreen(); } }
This JavaScript code defines two functions, openFullscreen() and closeFullscreen(), which respectively handle opening and closing fullscreen mode in a web browser. Let’s break down each function:
openFullscreen()
- This function is responsible for opening fullscreen.
- It begins by checking if the requestFullscreen property is available on the elem object. If it exists, it calls elem.requestFullscreen() to request fullscreen mode.
- If requestFullscreen is not available, it checks for the mozRequestFullScreen property (for Firefox). If it exists, it calls elem.mozRequestFullScreen() to request fullscreen mode in Firefox.
- If mozRequestFullScreen is not available, it checks for webkitRequestFullscreen (for Chrome, Safari, and Opera). If it exists, it calls elem.webkitRequestFullscreen() to request fullscreen mode in these browsers.
- Finally, if none of the above methods are available, it checks for msRequestFullscreen (for Internet Explorer and Edge). If it exists, it calls elem.msRequestFullscreen() to request fullscreen mode in these browsers.
closeFullscreen()
- This function is responsible for closing fullscreen.
- It begins by checking if the exitFullscreen property is available on the document object. If it exists, it calls document.exitFullscreen() to exit fullscreen mode.
- If exitFullscreen is not available, it checks for the mozCancelFullScreen property (for Firefox). If it exists, it calls document.mozCancelFullScreen() to exit fullscreen mode in Firefox.
- If mozCancelFullScreen is not available, it checks for webkitExitFullscreen (for Chrome, Safari, and Opera). If it exists, it calls document.webkitExitFullscreen() to exit fullscreen mode in these browsers.
- Finally, if none of the above methods are available, it checks for msExitFullscreen (for Internet Explorer and Edge). If it exists, it calls document.msExitFullscreen() to exit fullscreen mode in these browsers.