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