DEV Community

Cover image for Make Your Elements Full With requestFullscreen
Jhey Tompkins
Jhey Tompkins

Posted on • Originally published at jhey.dev on

Make Your Elements Full With requestFullscreen

Let's put it out there. This isn't one you're going to need often. But, it's cool to know about. There are so many neat native APIs that we often never use or overlook.

I only looked this one up because of a tweet thread Kent started

And the React hook useFull was born! ๐Ÿ˜…

NOTE:: Dev.to doesn't allow fullscreen permissions on iframes. That means to play with the demo requires, opening the demos up on CodePen ๐Ÿ‘

A React hook for making an element fullscreen.

But, this made me take a closer look at the method requestFullscreen from the Element API.


For those in camp TL;DR , you can make an element fullscreen with requestFullscreen(There are prefixes).

The request requires some form of user gesture. You can't request fullscreen without it.

Have a play with this demo!

NOTE:: The requestFullscreen method has different prefixes. Of course it does! There's a neat script in this article

You can also check out this screencast where I walk through the demo!


Why?

True. It's not something you'll use often. A common use case? Displaying media, documents, etc. Think YouTube videos, etc.

How?

It's as straightforward as

const makeFullscreen = () => {
  element.requestFullscreen()
}
Enter fullscreen mode Exit fullscreen mode

That needs to happen as the result of a user gesture. You might make the request as a result of clicking a button for example.

BUTTON.addEventListener('click', makeFullscreen)
Enter fullscreen mode Exit fullscreen mode

The cool thing is that you can make anything fullscreen. As long as it's not a dialog.

Detect Changes

How do you detect when you're in fullscreen mode? The method returns a Promise. But, not in all browsers ๐Ÿคฆโ€โ™‚๏ธ

The most compatible way currently is to listen to a fullscreenchange event on the document. Then check for the existence of document.fullscreenElement.

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement)
    console.info('We are fullscreen!!!')
  else
    console.info('Do nothing...')
})
Enter fullscreen mode Exit fullscreen mode

This gives you a neat hook to make changes to elements. You could apply different styles for example. In the React example above, I trigger an animation when the element goes into fullscreen mode. I do this by adding/removing a class on fullscreenchange.

Leaving

When you want to get out of fullscreen mode

document.exitFullscreen()
Enter fullscreen mode Exit fullscreen mode

That's It!

That's all there is to it.

The fun thing here is, what could you make with it? What kinda experience could you offer up to people with it? Where does your imagination take you?

What other cool browser APIs are out there to play with?

For example, in this demo, particle animations happen upon button click. It's like a "mock" screensaver you could provide your users!

NOTE:: There's a reason you can't create fullscreen screensavers that would show after some inactivity. One reason. Think of the popups!

Stay awesome!

Top comments (0)