Ever wanted to embed a Storyline 360 course in to a web page? Here’s how to do it using a responsive iframe.
Prerequisites
- You already have a Storyline course that has been:
- Published as HTML5 Only using the Modern Player (Tip: use the light theme for white web page backgrounds)
- Published for Web Distribution
- Uploaded to a web server.
- You have access to a website where you can add/modify a page.
Creating your iframe
Add the following HTML
inside the body
of your web page.
<div class=”embed-container”>
<iframe src=”http://www.example.com/story_html5.html”></iframe>
</div>
CSS
Now you need to add the following CSS rules to your website’s style sheet. Note the class
name matches that of the div
we’ve wrapped around our iframe
.
.embed-container{
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.embed-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
If you aren’t keen on messing with your website’s style sheets don’t worry, you can use the following code instead, complete with inline CSS.
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'>
<iframe src='http://example.com/story_html5.html'></iframe>
</div>
Magic
With either of the options above, the most important thing to do is update the padding-top
property to reflect the aspect ratio of your Storyline course. This is the bit of magic that makes the iframe
responsive.
Here are the percentages to set the padding-top
property to when embedding content sized using one of Storyline’s two default aspect ratios.
16:9 = padding-top:56.25%;
4:3 = padding-top:75%;
If you’re using a custom Story Size you can work out the correct percentage with the following calculation: height ÷ width = %
For example, one of our most-used sizes is 1024 x 672 pixels. So, 672 ÷ 1024 = 0.65625.
With a slight adjustment to the placement of the decimal point, my padding-top
needs to be set at 65.625%.
Conclusion
And there you have it. You should now be able to embed your Storyline content directly in a web page, just as I’ve done below.
This also works for Adobe Captivate eLearning projects published as HTML5.
Example: Using an iFrame to Embed Storyline 360 in a Web Page
Now that we’ve shown you how to embed Storyline 360 courses in an iFrame, we wanted to share an example of the code in action.
Further Reading
The following articles provided the information needed to write this post:
Responsive Iframes — The Right Way (CSS Only)! by Ben Marshall
Responsive Iframes with One Great CSS Trick by Gregory Gan
Making Embedded Content Work In A Responsive iFrame by Smashing Magazine
Related eLearning Insight Posts
How to continue numbered lists in Articulate Rise
16s video explaining how to continue numbered lists after inserting a new block in Articulate Rise 360.
Articulate Storyline 360 Crossword Puzzle
Learn how to build a crossword puzzle in Articulate Storyline 360.
3D Rotation in Articulate Storyline (Updated April 2019)
Blending Fuse, the 3D modelling app from Adobe with Articulate Storyline we created a 3D character and linked the output to Storyline’s slider to create a rotating interaction.
David began his eLearning career in 2000 after earning qualifications in Graphic Design and then Newspaper, Magazine and Infographic Design.
During his time working in the eLearning industry David has gained extensive experience designing and developing eLearning content for clients based in the UK, Canada and the USA. To date, David has created eLearning courses covering a broad spectrum of topics, ranging from Pharmaceutical, Healthcare, Retail and Sport through to Pet Nutrition, Marketing, Sales and Tourism.
He is passionate about creating well-designed and purposeful eLearning solutions. David is a current Articulate E-Learning Heroes Super Hero.