Course in full screen?

Depending on your browser and environment, the code below or some version of it may work for you. This is javascript code, so add it to an "Execute Javascript" trigger. Try it in your intended environment and let us know if it works for you.

toggleFullScreen();

function toggleFullScreen() {
 if ((document.fullScreenElement && document.fullScreenElement !== null) || 
 (!document.mozFullScreen && !document.webkitIsFullScreen)) {
 if (document.documentElement.requestFullScreen) { 
 document.documentElement.requestFullScreen(); 
 } else if (document.documentElement.mozRequestFullScreen) { 
 document.documentElement.mozRequestFullScreen(); 
 } else if (document.documentElement.webkitRequestFullScreen) { 
 document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
 } 
 } else { 
 if (document.cancelFullScreen) { 
 document.cancelFullScreen(); 
 } else if (document.mozCancelFullScreen) { 
 document.mozCancelFullScreen(); 
 } else if (document.webkitCancelFullScreen) { 
 document.webkitCancelFullScreen(); 
 } 
 } 

That's super useful Michael, thanks!

You're welcome. Hopefully it will work for her. Sometimes code like that needs to be updated to keep up with changes made to the various browsers, so always test, test, test, and then test some more, :)

Thanks for the code! Do I need to add the trigger to separately to each slide?

I did not test multiple slides, but the browser should stay full screen once set that way.

Hi Michael and Community members,

I have tried this and working fine, but I have tested this on android Tab first screen is  like below:

Actually I have given play button on first screen and once user click on play icon Full screen script is executing and this video is playing on same page, but video is not getting full screen, second screen is working fine. can you please tell me the cause? This is Published in storyline 2.

Hi Ravindra,

This discussion is quite a bit older, so I'm not sure if folks like Michael are still subscribed here. Perhaps you'll want to share a copy of your .story file here so that folks can take a look at the customizations you made?

Also, you could try reaching out to any users directly using the Contact Me button on their profile.

Best of luck with your course! 

Ravindra, I'm sorry but even though I am subscribed to this page, I did not receive a notifcation that you had replied. Please let me know if you are still trying to work through this. If I don't reply here, please contact me directly.

Please check out an updated version of this here that appears to work better across multiple browsers.

http://andersonelearning.com/demo/FullScreen/story.html

I've attached the .story file to this message. I welcome any input or improvements.

Hi Michael Anderson,

I tried embedding the code in my Storyline source file on a click of a button. However if I click the next button of the player to move to the next slide, an error appears in Internet Explorer. The error says Incorrect function in app.min.js. I am unable to move to the next slide. 

Also I tried adding a second slide in your source file (FullScreen_1.0) and the same problem occurs in that as well.

Any help will be highly appreciated.

Hi Michael

Thank you for the download example.  One thing I noticed is that the background goes black when in full screen.  What's the reason behind this, and can you change the colour if you need to?

Just curiosity at this point.  Many thanks!

Ian

Sameeksha, I see that error in IE and I'm looking at it now.

Ian, I will look at this also.

Thanks Michael!

Hi Michael 

Thanks for the script. It does work well, however I tried to put it on a slide master to avoid having to copy the icons all over, and the Java script doesn't work. I just wanted to let everyone know in case they are trying it. But copying it all over is the way to go.

Thanks Again

Marc, I will look at that too. Did you have that problem with one particular browser?

I haven't found a fix yet for the problem with IE. I know Storyline has its own Full Screen functionality, so maybe this code is interfering with that in IE.

There is an object with an id called "preso" in the Storyline output, which is the one I referenced to go full screen, as this seems to be the object for most of the page. I might have to consult with some Javascript or CSS expert to get this working in IE.

Thanks Michael! I will be looking forward to hear from you on this.

Hi Michael, 

I did further test this morning and I found why it was not working, I simply missmatched the hide trigger when I pasted it in my slide master. Now it does work, both on chrome and on EI (there is a permission warning on EI but it is easy for a user to see it).

Hope this makes senses, thanks again, it really saves my life :)

Marc, we are having a problem with this code in IE. It seems the slide can not be advanced with the next button when in full screen using this method. Are you seeing the same problem?

Hi Michael,

I do see the same issue, that is the: next button does not work in full screen in IE.

I confirm it does work in Chrome.

Marc

Kind of makes me wish IE would just go away. :)

Fortunately for me the prefered browser in my organisation is Chrome but I hear you...I will add a warning in my course...

Michael,

I also did a test in articulate Review and as a block in Rise.

The full screen works fine in Review but not in Rise, in both Chrome and IE..

Kind of interesting considering that Rise is Html5 and uses a Review link to insert a Storyline block.

I've seen similar things like this that were reported to not work correctly in Rise. I have not used Rise, so I'm not sure why that might be.