Ho to embed Storyline course in website and make it responsive

Hi all,

Can someone please tell me how to embed a Storyline course into a webpage and make it responsive? And 'responsive' is the key word. I can get decent results if I use the typical <iframe> coding with a specific width and height, but then I get the scroll bar when I shrink the browser or view the course on a phone. If I use some of the more elaborate methods on the web, I get better results in one area but worse results in another area.

I love articulate, but reliably displaying the course on a website and on ALL devices is a very important feature. And I don't seem to be having any luck. And as I scour the web, this topic seems to be and issue for many users.

Can someone please help me?

Thank you in advance.

Jeff

10 Replies
Matthew Bibby

Hey Jeff,

This is a tricky one. While the Storyline player is responsive, it is not responsive when it is inside an iframe (because the original page isn't resizing, just the window to the page...)

Your best option is to either size your project in such a way that it works okay on mobile or if that isn't ideal, make use of media queries to change what iframe is being displayed (or swap out the iframe for a link to the course for small devices). 

Raymond M

I've been looking at this recently and the best I've come up with so far is the following.

To make an iframe responsive add it to a <div> where padding-bottom = 3/4 x 100, where 3/4 relates to 4:3 ratio of the Storyline object (using the height and width ratio which you can get from within Articulate Storyline tool) and 100(%) is the width of div.

<div style="position: relative; width: 100%; height: 0px; padding-bottom: 75%;">

<iframe src="http://<path>/story_html5.html" style=" position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; "></iframe>

</div>

where <path> is the directory path/folder to your story_html5.html file.

Note: I've been getting this to work responsively on a computer web browser, but the Storyline 2 output appears to be getting "clipped" when actually viewed on an Android device using Chrome. This might be due to the way I have published the output, so I still trying to investigate the cause.

Edit: Note, the Storyline player was set to "scale automatically to the size of the browser".

Raymond M

I've tested this out a bit more and I think regardless of whether your Storyline design size is set to a 4:3 ratio, when it is displayed  in a browser or device it appears to add a "border" around the output to fill up the unused screen space within the iframe - this might be happening automatically within the html5 code for the Storyline output. Therefore I changed "padding-bottom: 56.25%" , to reflect a 16:9 size ratio and it seems to be working. However the Storyline content of the iframe is no longer "centred", but you can play around with the iframe's "left: 0px" setting to adjust this eg. "left: -15px" to adjust it.

In the future, it might be best to have a screen design ratio to be 16:9 whenever the Storyline output is to be displayed with a