Scaling options in Storyline 2 -- is there a third way?

Hey everyone!

I have a course built at 1024 x 768. Up until recently, I had the player size locked to optimal. The request has come down that the course scale down to fit lower-res screens, but I want the size to max out at 1024 x 768. Why? It will scale down to fit on midrange laptops and still look nice, but blown up to fill a browser window on a 1080p screen it looks like a fuzzy mess.  

Does anyone know how I'd go about doing this? Maybe modifying the code on the story_html5 page itself?

I feel like this is where to do it, but I'm not sure how. 

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

Maybe check the screen width using JavaScript and if it's over a certain resolution, assign a "width" var 1024?

Thanks in advance,


4 Replies
Brian Dennis

Fixing or changing scaling isn't trivial. The markup you've identified controls the learner's browser built-in scaling functionality, which gets set before any script fires. The better way to address is conditional cascade style sheets (CSS), which is quite complex.

If you are set on a scripting solution, I imagine you'll need to walk the DOM reflowing many elements. Like I mention, not trivial.

Joseph Ferraro

Sounds like it might be easier to rebuild the course in a higher resolution.

Might not be an option for you, but just sharing thoughts as this is something that came up recently in my company when we moved all our template styles to a widescreen format, which in turn gave us an opportunity to revisit optimal course design resolution.

Almost all of our company monitors top out at 1680x1050, and when undocked, the laptop screen resolution drops a bit, and projects need to elegantly resize for that.

The solution we chose to go with is 1366x768 - widescreen view, but not full 1920x1080 which tended to look too wide. With a player that needed a menu and transcript tab, this worked out really well.

Good luck on your project.


Jacqui Yoo

This is a feature I would very much like to see in Storyline. Unfortunately, you can't simply add a max-width to the player container (.framewrap) because it gets overridden by the js that makes it responsive by dynamically adjusting the CSS zoom property.

Would be interested to know if anyone has found a workaround solution.