Ever wanted to embed a Storyline 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:
  • 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 Captivate eLearning projects published as HTML5.

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

David Tait 4pt Limited

David began his career in eLearning in 2000 after earning qualifications in Graphic, News and Infographic Design.

He is passionate about creating well-designed and purposeful eLearning solutions and is a current Articulate E-Learning Heroes Super Hero.