Custom Fullscreen Button: A Cross-Browser Solution

Frontend

2024-07-10 21:59:43 +0700 · 2 mins read

Fullscreen functionality is a common requirement in web development, especially with media elements like custom video player. In this blog post, I'll share my experience working with fullscreen API

TL;DR

Note: On iOS browsers, the element must be a video element. On other browsers, it can be a div/video/... element.

// language: javascript
export const openFullScreen = (element) => {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    /* Firefox */
    element.mozRequestFullScreen();
  } else if (element.webkitEnterFullScreen) {
    /* iOS browsers */
    element.webkitEnterFullScreen();
  } else if (element.webkitRequestFullscreen) {
    /* Safari/Chrome/Edge */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    /* IE11 */
    element.msRequestFullscreen();
  }
};

// language: javascript
export const closeFullScreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    /* Safari/Chrome/Edge */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    /* IE11 */
    document.msExitFullscreen();
  }
};

Explain and notes

Each browser has its own fullscreen API, so you must include all of them to ensure it works on different browsers.
However, iOS browsers, including Safari and Chrome, have a limitation: they only allow the video element to go fullscreen. If you try to use the standard Fullscreen API on a div element, it won't work.

You can use the package react-device-detect to detect iOS browsers

// language: javascript
import { isIOS } from 'react-device-detect'

const handleFullScreenClick = () => {    
    const fullscreenElement = isIOS ? videoElement : containerElement    
    isFullScreen ? closeFullScreen() : openFullScreen(fullscreenElement)
}

How can we get isFullScreen status? Should we update it to true/false when the user clicks the custom fullscreen button?
The answer is no. Users can exit fullscreen mode by hitting the ESC button without clicking the fullscreen button. So you should update isFullScreen status by listening to the below event:

// language: javascript
document.addEventListener('fullscreenchange', () => {        
    const isInFullScreen = !!document.fullscreenElement        
    setIsFullScreen(isInFullScreen)  
})

Conclusion

Because fullscreen API depends on browser type, please test your fullscreen button on different browsers carefully before production release.
I use BrowserStack to test browser compatibility. You can give it a try.

Ref: Fullscreen API - Web APIs | MDN (mozilla.org)

Related blogs

Jekyll Asset Caching Strategy for AWS S3 + CloudFront Deployment

Deploying a static Jekyll site to AWS can be fast, but without the right caching strategy, users might see stale content or you might waste bandwidth re-downloading unchanged assets.This blog explains a dual-cache policy that combines long-term cachi...

Frontend

2025-08-11 10:52:50 +0700 · 3 mins read

PWA and Service Worker: Making Your Web App Feel Native

You might have seen browsers allow you to install a website like an app. Building a native application takes significant effort, and not many common applications support it. Google Calendar and Gemini are examples. To use them like a native app, I ju...

Software Engineer

Frontend

2026-04-25 17:28:32 +0700 · 3 mins read