HTML5 FullScreen API toggle with JavaScript
function goFullScreen() {
const el = document.documentElement,
rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
rfs.call(el)
}
document.querySelector('#full-screen-button')
.addEventListener('click', () => {
goFullScreen()
})
Keep in mind that requesting fullScreen
needs to be done via a user-triggered event such as a click event - mousedown
,mouseup
etc..
Changing the 1st line of _isFullScreen
function to
fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
Does the trick (at least for Firefox, Chrome and Safari on Mac and Windows)