Ho to embed Storyline course in website and make it responsive

May 25, 2017

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.


8 Replies
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>


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 

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