CODEWITHSUNDEEP
jqueryhtml5-fullscreenwebkitrequestfullscreen
Brecht272727
Brecht272727

Reputation: 21

Browser rejected fullscreen change via jQuery fullscreen plugin

I've seen a lot on SO about this problem but nowhere could I find a good workaround to solve this.

I have an iframe in which an HTML5 game is loaded. This is ok on desktop devices, but on mobile devices the iframe must be fullscreen. On the desktop version there is a button to go fullscreen but on mobile devices i can't do that. It should automatically go to fullscreen mode.

I have used this plugin for the fullscreen API: https://github.com/code-lts/jquery-fullscreen-plugin And set this code for the fullscreen button:

 $(document).on('click', '.fullscreen', function(e) {
   e.preventDefault();
   $('.iframe').fullScreen(true);
 });

And i used this script to detect if it is a mobile device: https://github.com/matthewhudson/current-device?tab=readme-ov-file

if(device.mobile()) {
    $('.fullscreen').click();
}

If it is a mobile device I should go to fullscreen mode but instead, I have an error:

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

I thought this was a user gesture: $('.fullscreen').click();

Is there any workaround for this issue?

Is it possible to do it by CSS?

Upvotes: 0

Views: 43

Answers (0)

Related Questions