Flexible player/browser setting

Mar 06, 2017

Hi there,

I want the SL2 player, once published, to downscale if the learner screen is too small to fit the optimal display of the course. In the meantime I want no upscale whatsoever. I want it to stay at its creation dimension(pixel/pixel)on big screens BUT to scale down on smaller screens. Downscale if need be, no upscale whatsoever.

Is this possible?

The only way to apply a downscale is to maximise player in browser window. Then it does downscale AND upscale... Upscale in my book not really whishable.

Any work around? I haven't look at the html code. Could there be a way? Maybe someone has been dealing with this issue.

Kodo!

7 Replies

Leslie McKerchie
Staff

7 years ago03/06/17 at 10:05 pm (UTC)

Hello Richard - Interesting question and not one that I'm sure I've seen previously. Your options for browser settings and player size can be found in this tutorial. You are correct, it's kind of all-or-nothing, but perhaps the option to lock the player at optimal size will assist.

Hopefully others users with insight or experience will chime in to assist as well.

Techno10 Lorrain
Author

7 years ago03/07/17 at 2:09 pm (UTC)

Good morning Leslie,

Not an easy one here. My guess is we can do something on the html code of the published page. Something to do with a CSS proprety : padding. R&D is short on my side. I'll have to dig further soon.

Thank for the follow up.

Techno10 Lorrain
Author

7 years ago03/13/17 at 6:31 pm (UTC)

Hello again,

Here's something to fellow CODERS in the community. The actual CSS property is : max-width.

In its description, it would actually prevent an objet (html tag) from rendering too big when not intended while keeping the ability to downscale when screen real estate is small.

The result code would be ex: img { max-width: 100%; }

We would need to get into those published HTML files and inject inline CSS proprety.

My time is short and my HTML/CSS is kinda burried deep since I haven't used html/css scripting in a while(2000-03). I am still doing tests but if someone knows where we could insert this to create the behavior, you are welcome!

Best Regards

almost 7 years ago07/17/17 at 2:40 pm (UTC)

Max-width doesn't work, unfortunately, since the scaling is achieved with the "transform: scale();" propriety that is added when you select the "Scale player to fill browser window" in the setting's player. The value is updated by the javascript depending on the size of the screen as you can see in this video (put it full screen it's small):

I found the problem but not the solution, I couldn't find a way to set a kind of "max-width" to this "transform: scale();" propriety. It would need to stop at "transform: scale(1);" so it doesn't get bigger than the original size of the course. Maybe someone will find a solution.