Modern player slide ratio

Jun 04, 2018

Hi. I like the new Modern player and tried applying it to one of my existing courses which is sized 1280 x 720 (16:9). The Modern player seems to be set to a default ratio which is not the traditional 4:3 or 16:9 so my project now doesn’t fill the horizontal space fully and doesn’t look so good. Can you tell me what the ideal slide ratio would be for this player. Thanks.

 

 

 

 

38 Replies
Ashley Terwilliger-Pollard

Hi Jane,

There isn't a set or recommended slide ratio for using the modern player. It should work with your slides as they are currently, and you'll see some differences in how those will display as shown here.

If you have a course that you think it's working right after upgrading, I'd love to take a look and test it. Can you share a copy of your .story file with us here? 

Todd Haynes

I'm having a similar issue. My courses in Storyline 360 have been 1280 x 720. In the Modern Player, there's a significant amount of padding around the slides in the PC version (all others look ok). In the example shown above (shown here), the slide fills up the player with very little padding. Can you please share what story size was used for the example provided? I've also tried the 2 default size of story sizes, and cannot replicate the fuller fill of the Articulate example.

1280 x 720 in modern player

1280 x 720 in Modern Player

Modern Player example provided by Articulate

Modern Player Example

Alyssa Gomez

Hi Todd!

The modern player will always completely fill the learner’s browser, leaving no white space around the player. That means if they have a widescreen monitor with the browser open fullscreen, they may see extra space on the left and right sides of the slide.

But as the browser window is minimized, the modern player adapts to the window size, like this.

The Healthy Habits example was made with a slide ratio of 4:3. However, if the browser screen were open wider, you would still see extra gray space on the left and right slides of that slide. 

Helen Hill

Hello,

I have been testing the new player today and had issues with this too. Is there a way to lock the size of the player when it opens to the size of the course rather than the monitor then? As currently it means that when a course is opened on a screen like we are working on we are getting big blocks of space and the buttons and menu/resources tabs are moving off screen, which doesn't seem logical to us. We would prefer they stayed in the top corner of the actual page. See the attachment for an example of what I mean. 

Thank you for your help, 

H

Alyssa Gomez

Hi Helen and Hadiya,

Thanks so much for that candid feedback.

The modern player always scales smoothly to completely fill the learner’s browser on every device and screen size, so there isn't an option to "Lock player at optimal size". With the classic player, you can choose to lock the size, which means it may not fit in every browser window.

If sounds like you'd prefer to have the option to "Lock player at optimal size" with the modern player. I'll pass this along to our product team, and if this option is added in the future, we'll let you know. 😁

Steve Covello

The inability to lock the player to optimal size is a major problem because some of our trainees have very large high resolution monitors. When the player is scaled to fit, it causes the JPEG content to look terrible.

You really need to revert the lock player to optimal size feature.

Peter Moore

Just adding a +1 to Steve’s support comment. The courses generally look poor quality now because they open at usually larger sizes than they were designed for and as mentioned by Steve the bitmap images look less than optimal. It creates a poor quality first impression.  There needs to be a way to make the modern player open initially at the size the course is designed at. 

Autumn Strausbaugh

I am finding the same issue as I adapt an existing course. Looks nice on smaller screens, but on a larger screen, things move out so far on each side of the course content that users may miss the nav. controls.  I'd love to be able to choose a maximum size this adjusts to.  Feeling a bit disappointed as everything else is great and my initial review of this with end users was very positive when used on a smaller screen.  BTW - I am not talking about a giant screen, I'm talking about a 27 inch monitor with the browser window expanded to fill the screen. I'm sure if I tested on a larger screen I'd have some of the same graphics resolution issues others reported here.

Ashley Terwilliger-Pollard

Hi Gwyneth, 

With the modern player, it will always completely fills the learner’s browser, leaving no white space around the player. You can set it to open in a new browser window and display at the optimal size. The optimal size is your slide size plus additional width and height for the player frame. (You'll see these options noted in the tutorial here.)

We are tracking a feature request to proivde users an option to lock player size or to set a maximum size in case a learner opens the course in a very large browser window. This feature hasn't bubbled up to the top of our roadmap, but it's helpful to have your feedback to add!  Here's a bit more about how we work to prioritize feature requests.

Stephanie Powner

It would be really useful to have suggestions about the best dimensions and settings, in order to get the best experience across the range of device resolutions learners are likely to use.  Unless training is delivered in a  corporate environment with specific hardware, its not possible to specify dimensions exactly but its necessary to consider those available in general.  I am looking to develop a new course using the modern player and i'd like to use the optimal settings from the start as a resize will a lot of  require rework but i'm not sure how to decide on this. Thanks

Ashley Terwilliger-Pollard

Hi Stephanie, 

It's difficult to share a one size fits all as learners could have any number of devices. With the modern player, it'll scale to fill the browser and on the mobile devices the entire screen. 

If you're concerned about small details on a slide, I'd design with the smallest device possible in mind and use those dimensions to help build your course. 

Also, keep in mind that Storyline 360 supports the devices and OSs outlined here. 

Joosep Arro

Any update on if we can finally fix the modern player to specific size rather than fill all? Looks horrible on most modern computer screens.
Maybe have an option that it will fill the screen up to certain resolutions, so the mobile devices can still benefit from this feature, but computer screens will not stretch it to unnecessary sizes?

Tatiana Nikolaeva

Hi everyone!

Here are my two cents to using modern player. 
On a desktop, it works well but on phones not so good.
When the phone has a portrait orientation the course fits perfect.
When I turn it to landscape one it doesn't. Please see the screenshots.

I use Android.

Any ideas of how it could be fixed?

Alyssa Gomez

Hi Tatiana,

It looks like the lower half of your slide is cut off in landscape mode. Is that what you're seeing?

If so, tell me more about your set up.

  • Are you on the latest update of Storyline 360? To check, click the Help tab, then click About Storyline. You should see 3.26.18601.0 in the bottom-right corner. 
  • What web browser were you using for testing on Android?
  • Where is the published content hosted – on a web server or LMS?
Tatiana Nikolaeva

Hi Alyssa,

Thanks for your answer!

Yes, I can see only the upper part of the slide, I can scroll it, but I'd like it fits in the same way as it fits for the portrait orientation.

Yes, I use the latest version of AS360

I use Chrome

The course is uploaded in our LMS (it has settings Open in a new window, for both % and px sizes of the window it works the same).

Thank you!

Alyssa Gomez

Hi, Tatiana. Thanks for those details – those clues will help us to nail down the culprit!

From here, I'd like to test the published output in SCORM Cloud, an LMS testing tool. This will narrow down whether the issue is related to Storyline or to your LMS.

Would you be willing to share your published output file with me?  You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting. Be sure to include what type of Android device you're using so I can test in the same one.