0%
Reading Settings
Font Size
18px
Line Height
1.5
Letter Spacing
0.01em
Font Family
Table of contents
.jpeg)
Custom Fullscreen Button: A Cross-Browser Solution
Frontend
Frontend

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 packagereact-device-detect to detect iOS 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
// language: javascript import { isIOS } from 'react-device-detect' const handleFullScreenClick = () => { const fullscreenElement = isIOS ? videoElement : containerElement isFullScreen ? closeFullScreen() : openFullScreen(fullscreenElement) }
How can we get
The answer is no. Users can exit fullscreen mode by hitting the ESC button without clicking the fullscreen button. So you should update
// 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)
I use BrowserStack to test browser compatibility. You can give it a try.
Ref: Fullscreen API - Web APIs | MDN (mozilla.org)
Related blogs


How to add a custom Inline Code to Trix editor
Lately, I’ve been improving the writing experience in my Rails app, and something kept bugging me: I wanted a way to add inline code formatting in the Trix editor, just like those snippets you see on blogs and documentation sites.Turns out, Trix does...
Frontend
Frontend


Modern JavaScript OOP Features
When I first started learning JavaScript, its object-oriented features felt like an afterthought. The language had objects and prototypal inheritance, but it was missing key features like true private fields and methods. That’s why many developers tu...
Frontend
Frontend
