what is full screen api

by Norberto Christiansen Jr. Published 3 years ago Updated 2 years ago

What does fullscreen element mean?

The fullscreenElement property tells you the Element that's currently being displayed fullscreen. If this is non-null, the document (or shadow DOM) is in fullscreen mode. If this is null, the document (or shadow DOM) is not in fullscreen mode.

What happens when you are in fullscreen mode?

When fullscreen mode is successfully engaged, the document which contains the element receives a fullscreenchange event. When fullscreen mode is exited, the document again receives a fullscreenchange event. Note that the fullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null fullscreenElement, you know you're in fullscreen mode.

How to toggle between fullscreen and windowed video?

In this example, a video is presented in a web page. Pressing the Return or Enter key lets the user toggle between windowed and fullscreen presentation of the video.

How to exit full screen mode?

You'll want to be sure to let your users know that they can press the Esc key (or F11) to exit fullscreen mode. In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt - Tab) while in fullscreen mode exits fullscreen mode as well.

How to present an element in full screen?

Given an element that you'd like to present in full-screen mode (such as a <video>, for example), you can present it in full-screen mode by calling its requestFullscreen () method.

Which browser supports unprefixed?

Note: Currently, only Firefox 64 and Chrome 71 supports this unprefixed.

Do fullscreen requests need to be called from within an event handler?

Note: Fullscreen requests need to be called from within an event handler or otherwise they will be denied.

Why is request fullscreen?

The word “request” in requestFullscreen is due to the fact that browsers don’t have permissions (by default) to activate fullscreen mode.

When was fullscreen introduced?

The Fullscreen API was introduced in 2013, and provides a native way for browsers to enter/exit fullscreen mode. This specification brought a slew of JavaScript APIs, and CSS selectors that we can use to refine this immersive user experience.

What is the event called when the user enters/exits fullscreen mode?

There’s also an event called fullscreenchange when the user enters/exits fullscreen mode that you can listen to:

Can HTML go fullscreen?

As you might have guessed, other HTML hlements can go into fullscreen mode too, not just document!

Is fullscreen available on the web?

Basics of the Fullscreen API. It’s really easy to activate fullscreen mode on the web! Currently, some browsers still require prefixing the requestFullscreen method. To check which Fullscreen API method is available, you can create a helper function similar to this:

Getting started

To enable a full-screen view on a user’s browser, you will first need to ask for permission to do so with the Element.requestFullScreen function.

The basic example: A full-screen section

The FullScreen API is most commonly used to embiggen images and videos, but each of them has their own little issues to consider, so I will start us off with something simpler: an HTML5 section with a button to turn the section into a full-screen view.

Expanding the basic example: A full-screen modal

The :fullscreen element is very similar to dialogs and modal windows in that it separates content from the rest of the page to place emphasis on it.

The most common FullScreen uses

As we mentioned before, there are basically two common uses for the :fullscreen element that people focus on, these being the ability to give either a video or an image a full-screen view.

Using the FullScreen API with images

In this example, I have some images laid out in a grid. In order for the images to be worth looking at in a full-screen view, I’ve used some examples from Little Nemo downloaded from the Internet Archive.

Full-screen images with SVGs

This starts out looking similar to our last example with the image grid, where you click an image and it opens in full-screen mode. In fact, aside from seeing four items in the grid now, you might think it was the same example. That is because I am using the SVG image element to embed the Little Nemo jpegs inside of the SVG.

Conclusion

The Fullscreen API is pretty simple, but with some creativity, you can have interesting results. We’ve seen how we can toggle the full screen for various types of elements, providing a large image view and a full-screen modal. Obviously, these examples could be extended to make full screen slideshows or similar effects.

What is the Full-Screen API?

The API allows a single element to be viewed full-screen. Unlike pressing F11 to force your browser to full-screen, the API is intended for images, videos and games running within a container. When you enter full-screen mode, a message informs the user they can press ESC at any time to return to the page.

Is the S in the screen required for Firefox?

Earlier implementations had an uppercase ‘S’ in ‘Screen’, and it is still required for Firefox. Adding prefixes results in considerably longer cross-browser code:

Is full screen supported on mobile?

The Full-Screen API is now supported by all recent desktop browsers, including IE11. There’s little support on mobile, but those browsers normally run in an almost full-screen view. Unfortunately, we have subtle differences, prefixing requirements, and cross-browser inconsistencies to solve…

Is cancel fullscreen still in Firefox?

Again, we have a lowercase ‘screen’. It was previously named cancelFullScreen, and still is within Firefox. The cross-browser code:

Is HTML5 full screen?

The HTML5 Full-Screen API is relatively simple but browser differences result in ugly code, and there’s no guarantee it won’t change again. The situation will improve so it may be preferable to invest time and effort in other features until the API becomes more stable.

What is fullscreen API?

The Fullscreen API allows a DOM element (and its descendants) to be represented in full screen. What it allows is to visualize the page by removing any element of the browser (menus, tabs,...). With this we can put from the document itself to full screen, video elements, images,...

What does element.requestFullScreen do?

The Element.requestFullscreen method will return a promise or Promise that will be solved once the full screen mode is activated.