Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What means 'initiated by a user gesture.' in element.requestFullscreen() API?

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?

like image 391
Stephan Vierkant Avatar asked Dec 07 '18 15:12

Stephan Vierkant


1 Answers

A Chrome extension (Ghostery – Privacy Ad Blocker) was the problem. After disabling the extension, the requestFullscreen API worked fine again.

like image 193
Stephan Vierkant Avatar answered Oct 10 '22 16:10

Stephan Vierkant