Forum Discussion
Fully immersive experience? (full-width, responsive)
Hello everyone,
The idea with my current StoryLine project is to have a fully immersive experience. Ideally, there would be no player (all the buttons to navigate the project are custom buttons in the slides) and it would automatically adjust to the browser's width.
I was able to turn off Menu & Controls in the Player options to hide the player and menu. But when I export the project (in SCORM) and open it with a browser, it isn't full-width. The browser keeps its original size, and there are black margins around it, like this:
Is there any possibility to have the project be completely immersive, i.e. full-width and responsive to the browser's size?
I know the answer might be "No, it would have to be a responsive webpage with several viewport sizes in the css code"... But in case there is something that could be done within StoryLine, I thought I would ask!
Thank you for your help!
Hi, Anouk.
Thank you for reaching out!
With the responsive player, your content will be adjusted, depending on the browser's size. Since Storyline will never change the aspect ratio you chose (stretching or cropping your image), those bars appear.
I'm hopeful others in the community have suggestions for your scenario!
Dear Maria,
Thank you for your reply and suggestion!
Sadly it's not really a solution for me, since the idea was to only have custom buttons and to turn off the player, therefore having the content be responsive. But I understand that, since StoryLine doesn't change the aspect ratio, it's probably not feasible.
Thank you again for your prompt reply though!
Just to follow-up in case anyone is reading this and searching for a solution, I realized that one way to adress this is to use Articulate Rise, and to insert Storyline blocks inside your Rise project. You can add Storyline blocks when you want to add an interaction that isn't possible with Rise only.
I found this example to be most helpful:
