I'm trying to use the elem.requestFullscreen
API, but I get this error (on Chrome 70 on Ubuntu, not tested on other browsers):
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
This looks like a clear error message. And I'm happy that browsers prevent developers from firing fullscreen events without user interaction.
But in my case, I'm having a button with a click event. How is a click event not a 'user gesture'? I've looked at this answer.
Here's my code:
let button = document.getElementById('toggle')
button.addEventListener('click', function ()
{
let elem = document.getElementById('fullscreen')
if (elem.requestFullscreen) {
elem.requestFullscreen()
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen()
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen()
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen()
}
})
<button id="toggle">
Toggle
</button>
<div id="fullscreen">
fullscreen content
</div>
https://jsfiddle.net/svierkant/15buv80z/9/
What is exactly a 'user gesture' in this case? How can I toggle fullscreen with a click event?
A Chrome extension (Ghostery – Privacy Ad Blocker) was the problem. After disabling the extension, the requestFullscreen
API worked fine again.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With