A Better Responsive Player

Jul 28, 2017

Xavier Godbout
By Xavier Godbout

We love responsive stuff and I know you do too! Unfortunately, we were not satisfied with the current "responsiveness" of the player (not the content). Yes, it could get the player smaller if you have a smaller screen but if you had a bigger screen than the original size of the course it was all fuzzy and blurry which is a big NO NO. 

So, that's when my friend and I came up with a solution! What it basicly do is: it adapt your player if your screen is smaller than the orignal course size but lock the player to its original size if your screen is bigger.

Here's Before and After. (Resize your browser screen to see the difference)

 

And here's the javascript if you know what to do with it.
If not, do not worry! There is a step-by-step tutorial right after!

//BETTER RESPONSIVE PLAYER
var pres = document.getElementById('presentation'), $pres = $("#presentation");
function resizePres () {
 var scale = pres.getBoundingClientRect().width / pres.offsetWidth;
 scale = scale > 1 ? 1 : scale;
 $pres.css({transform: 'scale(' + scale + ')'});
}
resizePres();
window.addEventListener('resize', resizePres);

 

How to setup a better responsive player:

  • First of all, we need to change some settings in order for this to work.
    In the top bar menu of Storyline, press the "Player" menu.
  • This should come up:
  • Secondly, you are going to press on the "Other" properties.
  • You are now going to select those settings in the "Browser Settings":
  • ;) We are almost done! You can now close the "Player" settings and create a new trigger just like this one:
  • You can now click on the three dot to add the Javascript.
  • Simply copy and paste the Javascript provided.
//BETTER RESPONSIVE PLAYER
var pres = document.getElementById('presentation'), $pres = $("#presentation");
function resizePres () {
 var scale = pres.getBoundingClientRect().width / pres.offsetWidth;
 scale = scale > 1 ? 1 : scale;
 $pres.css({transform: 'scale(' + scale + ')'});
}
resizePres();
window.addEventListener('resize', resizePres);

  • Save and close your trigger.
  • Publish your course.
  • Enjoy your better responsive player!

 

Next challenge would be to center the player in the window! I already tried to add those attributes to the #presentation id without any success:  

position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;

Here's what it does: Centered Player

If anybody has a solution to give or want to solve this just like me, feel free to post any findings in this post to help the community. If I find anything, I will make an update on this post.

Have a wonderful day!

 

This wouldn't have been possible without the precious help of my good friend Alex Gilbert!

You can check out his website here if you need any help with your Javascript and/or any other backend related stuff: www.alexgilbert.ca

22 Replies
Andrew Hanley
over 6 years ago07/31/17 at 1:49 pm (UTC)

Xavier - huge huge thanks to you for this. I knew there could be a way to manipulate those variables through JS but hadn't had time yet to look deeply into it.

This has long been a problem with Storyline and to get this simple feature (which lets face it, should be part of Storylines Player options anyway) is fantastic.

Again, many thanks to you (and Alex!)

Xavier Godbout
over 6 years ago07/31/17 at 4:05 pm (UTC)

If you look carefully to the transform: scale(x) propriety, you can see in the before video that it exceed (1) which is the original size of the course (mine is 1280px X 720px)

 

And... If, again, you look carefully to the transform: scale(x) propriety, you can see that it stop at (1) and the player stop expanding.

Xavier Godbout
over 6 years ago07/31/17 at 6:46 pm (UTC)

Well... I feel sorry for you because it is working great on all of our team's computers on every browser (tested on Chrome, Firefox, Safari, Edge and even Explorer).

I can't really help you here. You can see in the videos that it is working fine for me so...

You could maybe try to locate the transform: scale(x); propriety in the developer tool of your brwoser which is attributed to the <div id="presentation"> to see for yourself how it behaves.

Here's where you can find the div:

Andrew Hanley
over 6 years ago07/31/17 at 6:56 pm (UTC)

@Brian Allen - it seems to be working ok for me too, I can see the "subtle" difference between [Before] and [After]. Im also running a 1920 x 1080.

 

Maybe you could share your spec of machine and browser in question and we could diagnose the issue. Im sure this solution is well tested across a large range of machines and systems with no difficulty, but sods law states that I soon as I use this solution for one of my clients, they will have exactly the same issue as you Brian!

So it could be valuable to try to get a fix now. :)

Brian Allen
over 6 years ago07/31/17 at 6:57 pm (UTC)
Xavier Godbout

Well... I feel sorry for you because it is working great on all of our team's computers on every browser

Haha, no worries Xavier, I'll get over it and move on some how :)

I will say in IE it works as advertised, but in Chrome it scales to whatever size, however big I scale my browser, rather than limiting it to 1280x720.

The main thing I wanted to do was let you know that your solution may not work for everyone. From my experience if there's one person, one browser in my testing group that does not conform then there are probably many others outside of my test group.

Cheers!

B

Brian Allen
over 6 years ago07/31/17 at 6:59 pm (UTC)
Andrew Hanley

Maybe you could share your spec of machine and browser in question and we could diagnose the issue. Im sure this solution is well tested across a large range of machines and systems with no difficulty, but sods law states that I soon as I use this solution for one of my clients, they will have exactly the same issue as you Brian!

Andrew, yes, exactly this. Looks like we were responding at about the same time, but with the same thought.

I'm running a 64 bit windows PC on Win7 Enterprise, and the browser is Chrome, version 59.0.3071.115 (Official Build) (64-bit)

Andrew Hanley
over 6 years ago07/31/17 at 7:09 pm (UTC)
Justin Lovett

I think this primarily has to do with how Chrome & Firefox upscale images and videos. The HTML5 for Storyline just isn't quite "there yet" in my experience with up-scaling or resizing, especially when it comes to the player. Also I didn't quite see a difference between the quality of your examples just the sizing.

 

Good point about the HTML5 for SL not being mature... definitely come across that one many times!

And very interesting about the quality. I wonder if the difference was more pronounced though, would be see a much larger difference. I suspect yes? Testing time!...

This discussion is closed. You can start a new discussion or contact Articulate Support.