1. Home
  2. Knowledge Base
  3. Tin Canny LearnDash Reporting
  4. Making eLearning Modules Responsive in iFrame

When you choose to embed your eLearning module in an iFrame, you have the option to set its width and height in the upload dialogue. The default width is 100%, and default height is 600px.

tincanny_uploader_iframe_size

Since the size of your learner’s browser window varies, your eLearning module should resize accordingly to take up 100% width of available space. However, the height remains fixed and content will be vertically centered in the iFrame. As a result, you may see additional space above and below the module on smaller screens or mobile devices.

Because each authoring tool (Storyline, Captivate, and iSpring) supported by Tin Canny has its unique way of defining layout elements in the published module, at this time there isn’t a workable solution we can implement that will work consistently with all authoring tools. The following CSS fixes can be added manually to your site to address the layout issue you may experience when trying to display eLearning modules in iFrame.

Custom CSS for Storyline 2 and Storyline 360 Modules

Before you publish your Storyline module, in Browser Settings make sure the Player size is set to “Scale player to fill browser window”.
tincanny_storyline_player_properties

After you upload and choose to insert your module in an iFrame, you should see a shortcode similar to the following:
[vc_snc embed_type="iframe" item_id="1" item_name="Lesson 1" width="100%" height="600px" frameborder="0" src="https://yourdomain.com/wp-content/uploads/uncanny-snc/1/story.html"]

Remove the width and height attributes, and wrap the shortcode in a <div> like the following:
<div class="iframe-ratio" style="padding-bottom: 75.7%;">[vc_snc embed_type="iframe" item_id="1" item_name="Lesson 1" frameborder="0" src="https://yourdomain.com/wp-content/uploads/uncanny-snc/1/story.html"]</div>

Note that the value of padding-bottom should be equal to your module’s (height/width)*100

To calculate the aspect ratio of your published module, you need to know your story size, plus any additional width and height added to the player features.

For example, a chromeless player that is 720 pixels x 540 pixels will have 20 pixels added to the player frame. So the value of padding-bottom will be (560/740) * 100 = 75.7

You also need to add the following CSS for the div and iframe:
.iframe-ratio {
width: 100%;
height: 0;
position: relative; }

.iframe-ratio iframe {
width: 100%;
height: 100%;
position: absolute; }

With these changes, your published Storyline module should scale proportionally in different browser sizes.

Custom CSS for Captivate 9 Modules

The above guidelines for Storyline also work for Captivate. The key is to find out the width and height of your published Captivate module, taking into consideration any additional pixels added by the player features.

Custom CSS for iSpring 8 Modules

The above guidelines for Storyline also work for iSpring. The key is to find out the width and height of your published iSpring module, taking into consideration any additional pixels added by the player features.

Was this article helpful?

0 replies

Comments/Questions

Please note that this is not an official support channel and questions/comments may go unanswered.
To request support, log in to your account and click Submit a Request.

Leave a Reply

Your email address will not be published. Required fields are marked *