Fullscreen button not showing on Virtual Tour
Closed this issue ยท 5 comments
On the official demo from Joubel (https://h5p.org/virtual-tour-360), there is a fullscreen button at the top right of the scene.
This button is not showing when loading the same content with h5p-standalone.
Any idea how to make it visible?
Thanks for your great work!
Thank you @edubox-rpi. Seems the full-screen property is set to default at the moment.
I will expose the property so anyone can configure the behavior
@edubox-rpi you can now enable the button by adding the fullScreen option i.e.
const el = document.getElementById('h5p-container');
const options = {
h5pJsonPath: '/h5p-folder',
frameJs: '/assets/frame.bundle.js',
frameCss: '/assets/styles/h5p.css',
fullScreen: true
}
new H5PStandalone.H5P(el, options);
๐ This issue has been resolved in version 3.2.0 ๐
The release is available on:
Your semantic-release bot ๐ฆ๐
Thanks, it works!
But, when I exit fullscreen and go fullscreen again, the button is not hidden and it throws an error in the console.
@edubox-rpi I have raised an issue on H5P forums and hope will get feedback to determine if we will provide a hack or a permanent fix for the issue.
A quick fix would be assgining this event callback function a name
h5p-standalone/vendor/h5p/js/h5p.js
Line 676 in ecbcf2a
and then replacing arguments.callee
with above function name
h5p-standalone/vendor/h5p/js/h5p.js
Line 686 in ecbcf2a
then build the standalone player using yarn build
i.e.
document.addEventListener(eventName, function fullscreenEvtHandler() {
if (first === undefined) {
// We are entering fullscreen mode
first = false;
entered();
return;
}
// We are exiting fullscreen
done('h5p-fullscreen');
document.removeEventListener(eventName, fullscreenEvtHandler, false);
});