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

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?
1 reply
  1. Matt
    Matt says:

    You can also use just the following CSS to override the standard shortcode output. Useful for situation where a non-developer is creating new Lessons with embedded content

    .uo-tincanny-content {
    width: 100%;
    height: 0;
    padding-bottom: 75.7%;
    position: relative;
    }

    .uo-tincanny-content iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    }

    Reply

Comments/Questions

Please note that this is not a support forum. If you are experiencing issues on your site, please open a support ticket instead. Site-specific support questions submitted as comments will be unanswered.

Leave a Reply

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

Pin It on Pinterest