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.
I understand the concept of media queries, but I'm not an expert. Can you or anyone provide a reference to coding examples (media queries) for this particular challenge?
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.
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".
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
I see that this discussion is a bit old, but it's the most useful thing I've found so far. I was wondering whether you have been able to tackle this as I am struggling with it currently. Unfortunately, the code posted above didn't make any difference to my project :/
8 Replies
Hi all,
Could someone please help me out with this? At least the Articulate staff could give me some assistance. Thank you in advance.
Jeff
Thank you very much, Matthew.
I understand the concept of media queries, but I'm not an expert. Can you or anyone provide a reference to coding examples (media queries) for this particular challenge?
I appreciate your assistance.
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".
Thank you, Raymond.
I'll try this.
I've researched issue quite a bit and it is a thorn in the side of many users. Hopefully we can find a final solution for this.
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
Thank you, Raymond. I really appreciate that you've taken time to help me.
Not 100%, Matthew, but I'm further along than when I started.
Hi everyone!
I see that this discussion is a bit old, but it's the most useful thing I've found so far. I was wondering whether you have been able to tackle this as I am struggling with it currently. Unfortunately, the code posted above didn't make any difference to my project :/
This discussion is closed. You can start a new discussion or contact Articulate Support.