Forum Discussion

AndrewMaranta-2's avatar
AndrewMaranta-2
Community Member
3 years ago
Solved

Here's an easy way to create a fullscreen button in Storyline

Hey all,

Just thought I'd pass along this tip for anyone that wants their users to view their courses in fullscreen.

Here's the example: https://360.articulate.com/review/content/47627759-c0a4-4921-a49a-785772d2f07a/review

To add it yourself, just add this "Execute Javascript" Code to any object and you're good to go.

var elem = document.documentElement;

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}



if(document.fullscreenElement == null){
openFullscreen();
}else{
closeFullscreen();
};

 

 

Cheers,

Andrew

3 Replies

  • JadeGillam's avatar
    JadeGillam
    Community Member

    Thank you AndrewMaranta-2! In the past, I have used this script in my Storyline projects by allocating it to a Javascript trigger that executes when a full-screen button is clicked. It has worked wonderfully.

    Recently though, I've had issues with it not working properly; it will only work (ie toggle to full-screen) the first time the button is clicked. When clicked a second time, it toggles back to its original size, but after that won't revert to full-screen size any more. I can't work out why this happens. Would you have any ideas you might be able to share? Thank you 🙏

  • There is a variable for fullscreen just toggle it