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:
  • 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

Pin It on Pinterest

Share This