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.įor example, a chromeless player that is 720 pixels x 540 pixels will have 20 pixels added to the player frame. Note that the value of padding-bottom should be equal to your module’s (height/width)*100 Remove the width and height attributes, and wrap the shortcode in a like the following: Custom CSS for Storyline 2 and Storyline 360 Modulesīefore you publish your Storyline module, in Browser Settings make sure the Player size is set to “Scale player to fill browser window”.Īfter you upload and choose to insert your module in an iFrame, you should see a shortcode similar to the following: 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. As a result, you may see additional space above and below the module on smaller screens or mobile devices.īecause 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. However, the height remains fixed and content will be vertically centered in the iFrame. Since the size of your learner’s browser window varies, your eLearning module should resize accordingly to take up 100% width of available space.
The default width is 100%, and default height is 600px. 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.