![Bill4time payment](https://loka.nahovitsyn.com/240.jpg)
![css iframe css iframe](https://i.stack.imgur.com/wQvar.png)
The above guidelines for Storyline also work for iSpring. 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. Remove border from iframe tag in the webpage could be done by using one of the CSS properties of the iframe tag called frameBorder and set its value to 0. The above guidelines for Storyline also work for Captivate. The Iframe is used to display a web page on the webpage. With these changes, your published Storyline module should scale proportionally in different browser sizes. Using the same examples given above, you would essentially be using a parsing method of finding the divs in the page, and then applying the CSS to it and then reprinting/echoing it out to the end user. You also need to add the following CSS for the div and iframe: You would need to print/echo the HTML of the page into the body of your page then apply a CSS rule change function. So the value of padding-bottom will be (560/740) * 100 = 75.7
#Css iframe plus#
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.
![Bill4time payment](https://loka.nahovitsyn.com/240.jpg)