Course in full screen?

Nov 17, 2017

I saw a number of times the question was asked whether the course can also provide in full screen mode. That was some years ago. Is it possible in the meantime in Storyline 3?

53 Replies
Marc Pageau

I think I found a way to use it in Rise that would be to add (not for the faint of heart) this iframe is only supported on Chrome.

allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"

After the iframe insert of the Review insert in Rise...(for those who are interested you need to inspect the Rise StorylineBlock in Chrome)

<iframe allowtransparency="true" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" name="cjtrbffzi0032396257z0uyyv" class="blocks-storyline__item__iframe" src=""></iframe>

This is of course just for fun, but I might give it a try.

Michael Anderson

Sameeksha, I didn't have time to make a project that toggles this setting and everything, but the code below appears to work okay in IE11, allowing the next button to work ok. Please check it out and test it well. I will put a project together if I get time tomorrow.

var fullStorylinePlayer = document.querySelectorAll("html");
if (fullStorylinePlayer[0].requestFullscreen) {
}else if (fullStorylinePlayer[0].mozRequestFullScreen) {
fullStorylinePlayer[0].mozRequestFullScreen(); // Firefox
}else if (fullStorylinePlayer[0].webkitRequestFullscreen) {
fullStorylinePlayer[0].webkitRequestFullscreen(); // Chrome and Safari
}else if (fullStorylinePlayer[0].msRequestFullscreen) {
fullStorylinePlayer[0].msRequestFullscreen(); // IE
Jeremy Larson

Hey Micheal,

My company is moving to a new content management system and as a result of some of the new platforms constraints we would really benefit from being able to use this Full Screen mode. I have tested it out and it seems to work fantastic. But before I try to implement this company wide on tons of software simulations built with Storyline, I am wondering if you (or anyone else) has run into any issues thus far when browsers have updates or if there are any other concerns with how stable this solution is. Thank you!

Robin Tomar

Thanks, Mr. Michael

I hope you are doing great :)

This helps and working fine before update the storyline 360, but now (after update) it is generated 2 new issues.

Step to reproduce:

1. You Click the enter fullscreen, that's not working the first attempt. It takes 2 attempts.

2. If you enter the fullscreen and after that exit, the full-screen without click exit button means only select the "Esc" keyboard key. Now we exit the full screen but button state the same i.e. our button enters the full screen.

Please look into this and let me know if you have to find any solution.

I am looking forward to your great response.

Catedra SAS

Hola Robin, efectivamente estoy teniendo esos problemas.

1. Al hacer   clic en la pantalla completa, eso no funciona en el primer intento. Se necesitan 2 intentos. (para este aun no encuentro solución)

2. Al devolver o mover la barra de desplazamiento del reproductor el estado del botón vuelve al inicio. es decir si la pantalla esta en pantalla completa debe aparecer el botón de salida pantalla completa (esti pasa) pero al mover  la barra de desplazamiento del reproductor queda nuevamente e botón full screen ( Para esto lo que hice fue poner todo en una capa y desde la capa principal llamarla)

3. Evidentemente me pasa que cuando hago clic en "ESC" se sale del full screen y queda el boton exit full screen ( he intentado hacer algo pero aun no encuentro nada) .

4. Otro problema y no se como darle solución tal vez mi falta de experiencia y si alguien puede ayudarme y es que cuando paso al slide siguiente los botones vuelven al estado inicial... evidentemente con patrón de diapositivas no se puede... no se si haya un disparador especial que aplique el full creen y funcione para todo el proyecto de una vez. 




Harshad Joglekar

Hi Michael, Firstly, thanks for sharing the JS with us. It's working and very helpful. What I have done in my course is add a player tab on the Storyline Player - View/Exit Full Screen. So each alternate click will Show and then Hide the full screen mode. Currently you have shared 2 different codes for View and Hide. Is it possible to have one common code? Kindly advise.

Farzan Mohajerani

Hi Michael.

I know this is an old thread but thought maybe someone else might need this as well.

First of all, thank you for the code. But one point.

I put the code at the beginning of my timeline to go to full screen right away. But since your function is not inside a $(document).ready of jQuery, the function will be executed before even loading the jQuery library, therefore giving an error of "$ is not defined".

Besides, as almost all your code is just pure JavaScript, there is no need to use jQuery just to select a dom object.

So, what I did was to replace "$("#preso").get(0)" with "document.getElementById('preso')" and totally removed loading jQuery:

if (document.getElementById('jquery') == null) {
add_script("", "jquery");}

Now, it works perfectly.