How to create a customized Fullscreen Button?

ActivePresenter
1

Good Morning everybody,

Is it possible to define a “On Click” action to display the project in Fullscreen Mode? In “Adjust Variable” I cannot find those commands, neither anywhere in the Software Manual. Maybe there exist any useful JavaScript Code which I could use.

Alternatively it would be helpful to hide the progress bar in the Toolbar and to use only the “Display Mode Button”. But i would prefer a customized button, because i dont want to use the toolbar.

Background: We are currently investigating how to embed a project in a website with a header, navigation etc. The project size is to small in this case.

Many thanks in advance.

BR
Marcel

2

Hasn’t anybody any idea?

Meanwhile I solved it with a workaround. A link on the project view opens a new browser window without any header etc.

3

Hi,

It requires coding in JavaScript. Basically, you need to add an On Click event to the button, and add an Execute JavaScript action with following code:

var containerElement = prez.container;
if (containerElement.requestFullscreen) {
    containerElement.requestFullscreen();
} else if (containerElement.mozRequestFullScreen) {
    containerElement.mozRequestFullScreen();
} else if (containerElement.webkitRequestFullscreen) {
    containerElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (containerElement.msRequestFullscreen) {
    containerElement.msRequestFullscreen();
}

Regards,

4

Wow, thanks a lot. That is exactly what i was looking for.

Learning never stops :slight_smile:.

5

Hi Dao Viet Phuong!
Your Java Script code for FullScreen is very useful! But a question: How to toggle for non fullscreen in same button? Thanks!!!

6

Hi Alexandre,

For latest ActivePresenter version (7.5.2), you can use the following script to toggle fullscreen:

var fsAPI = AP.fullscreen;
if (fsAPI.fullscreenElement())
  fsAPI.exitFullscreen();
else
  fsAPI.requestFullscreen(prez.container);

Regards

7

Hi Toan!
Sorry, But I do not have much experience with codes. How could I use this on a button? Thanks for advance

8

Hi Alexandre,

You can follow @phuongdv’s answer, just replace the code in Execute JavaScript action by this new code.

Regards

9

Thanks Toan!

I was able to use this function. I hope it helps others!

best regards,

fullscreen.approj (200 KB)

10

Good afternoon.
After some testing, this javascript doesn’t work on ios, is there any reason?

11

Hi,

For iOS devices, the script just works on iPad Safari, not iPhone: https://caniuse.com/#feat=fullscreen

Regards