Display Storyline 360 Course in Responsive Iframe

I recently came across a useful trick to make an iframe responsive, providing an ideal way to embed Storyline 360 courses directly in to a web page, without the cropping that occurs with a standard iframe.

Getting started

To start you'll need to publish your course as HTML5 Only, using the Modern Player.

Next, publish your course for Web Distribution and upload it to a web server.

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>

It’s important that you wrap the iframe in a div. We’ve given our container div a class called embed-container.

Before continuing you’ll need to update the iframe source/URL to point to your published Storyline project’s story_html5.html file.

CSS

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 editing your website’s style sheets you can use the following code instead. Just paste it all in to the body of your web page.

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

Aspect ratio

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, for a story size of 1024 x 672 pixels, the calculation looks like this: 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%.

You should now be able to display your Storyline content directly in a web page without it being cropped.

The original blog post for this is here: http://www.4-pt.co.uk/2018/10/24/embed-storyline-360-responsive-iframe/