All
HTML5

How can you enable full screen mode for web pages in HTML5?

Full screen mode is a feature that allows web pages to occupy the entire screen of a device, hiding the browser interface and other elements. This can create a more immersive and engaging experience for users, especially for web pages that display multimedia content, such as videos, games, or slideshows. In this article, you will learn how to enable full screen mode for web pages in HTML5 using the Fullscreen API and some basic HTML and CSS code.

1 The Fullscreen API

The Fullscreen API is a JavaScript interface that provides methods and events for requesting, exiting, and managing full screen mode. It is supported by most modern browsers, but you may need to use vendor prefixes for some browsers, such as webkit or moz. To use the Fullscreen API, you need to access the document or an element that you want to display in full screen mode, and call the requestFullscreen() method on it. For example, if you have a video element with the id "myVideo", you can use this code to request full screen mode when the user clicks on it:

var video = document.getElementById("myVideo");
video.addEventListener("click", function() {
  video.requestFullscreen();
});

To exit full screen mode, you can call the exitFullscreen() method on the document object. For example, you can use this code to exit full screen mode when the user presses the Escape key:

document.addEventListener("keydown", function(event) {
  if (event.key === "Escape") {
    document.exitFullscreen();
  }
});

The Fullscreen API also provides some events that you can listen to and respond to, such as fullscreenchange, fullscreenerror, and fullscreenenabled. For example, you can use the fullscreenchange event to detect when the full screen mode changes, and update the style or content of your web page accordingly:

document.addEventListener("fullscreenchange", function() {
  if (document.fullscreenElement) {
    // do something when full screen mode is on
  } else {
    // do something when full screen mode is off
  }
});

Add your perspective

Vivek Gautam

Engineer @ Flipkart | ReactJs | TypeScript
Report contribution
You might wonder where tech giants like Flipkart are using Fullscreen API. Yes in Android Webview. Let me explain 1. A/B Testing: Integrating web apps via WebView allows easy experimentation and real-time user feedback, streamlining A/B testing and reducing reliance on frequent app updates. 2. Time Efficiency: Integration offers a quick solution for time-crunched development, delivering feature-rich experiences to users promptly without building native apps from scratch. 3. Instant Updates: It enables real-time content and feature updates, eliminating the need for users to download app updates, and enhancing user experience. 4. Can use smooth Transitions for seamless opening and closing of review.

Like
Zainul Abdeen Imran

Wordpress | Html | Css | Javascript | Php | web Developer 🧩
Report contribution
Difficulty managing full screen mode. Using the Fullscreen in JavaScript. Supported by most modern browsers. - JavaScript interface for full screen. - Methods for requesting and exiting. - Manage full screen mode easily. - Use vendor prefixes for some browsers. - Access document or specific element. - Call requestFullscreen() method for full screen. Fullscreen simplifies managing full screen mode. #FullscreenAPI #JavaScript #WebDevelopment

Like

2 HTML and CSS for full screen mode

Besides using the Fullscreen API, you also need to use some HTML and CSS code to make your web page look good and function well in full screen mode. For example, you may want to use the <meta> tag to set the viewport width and height to match the device screen size, and use the <link> tag to specify a different stylesheet for full screen mode. For example, you can use this code in the <head> section of your HTML document:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fullscreen.css" media="fullscreen">

The media attribute of the <link> tag allows you to apply a different stylesheet only when the web page is in full screen mode. In the fullscreen.css file, you can use the :fullscreen pseudo-class selector to target the element that is in full screen mode, and apply some styles to it. For example, you can use this code to make the video element fill the entire screen and hide the controls in full screen mode:

video:fullscreen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  controls: none;
}

You can also use media queries to adjust the layout and design of your web page for different screen sizes and orientations in full screen mode. For example, you can use this code to change the font size and color of a heading element depending on the screen width and orientation in full screen mode:

@media (min-width: 768px) and (orientation: landscape) and (fullscreen) {
  h1 {
    font-size: 3rem;
    color: white;
  }
}

By using the Fullscreen API and some basic HTML and CSS code, you can enable full screen mode for web pages in HTML5 and create a more immersive and engaging experience for your users. You can also use other HTML5 features, such as the video and audio elements, the canvas element, or the Web Audio API, to enhance your multimedia content in full screen mode.

Add your perspective

Vivek Gautam

Engineer @ Flipkart | ReactJs | TypeScript
(edited)
Report contribution
If you are using in your web app in Android WebView Activity, you need to few lines , and you are good to go. Enable JavaScript: First, ensure that JavaScript is enabled in your WebView, as the Fullscreen API requires JavaScript to work. But first, you need to check is Full-Screen API is supported by the browser, then only we can use it // JavaScript function to enter full-screen mode function enter fullscreen() { if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); }

Like

3 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Add your perspective

Vivek Gautam

Engineer @ Flipkart | ReactJs | TypeScript
Report contribution
We should keep in mind, How and where It should be good. I think for Gaming web apps , Presentations and E-Learning, Interactive Web Apps like Dulingo , Rich Visual Experiences: Websites showcasing high-resolution images or intricate visualizations can make use of full-screen mode to fully showcase their content. To enable full-screen mode in HTML5, the Fullscreen API offers a versatile toolkit. By combining HTML, CSS, and JavaScript, developers can create buttons or triggers that allow users to seamlessly toggle between standard and full-screen views. This not only enhances user engagement but also adapts well to various device sizes and orientations.

Like

How can you enable full screen mode for web pages in HTML5?

1

2

3

1 The Fullscreen API

2 HTML and CSS for full screen mode

3 Here’s what else to consider

HTML5

Rate this article

Thanks for your feedback

More articles on HTML5

More relevant reading