11/12/2022 0 Comments Make iframe responsive![]() With a slight adjustment to the placement of the decimal point, my padding-top needs to be set at 65.625%. If you’re using a custom Story Size you can work out the correct percentage with the following calculation: height ÷ width = %įor example, for a story size of 1024 x 672 pixels, the calculation looks like this: 672 ÷ 1024 = 0.65625. Here are the percentages to set the padding-top property to when embedding content sized using one of Storyline’s two default aspect ratios. This is the bit of magic that makes the iframe responsive. #Make iframe responsive update#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. Note the class name matches that of the div we’ve wrapped around our iframe.embed-container We’ve given our container div a class called embed-container.īefore continuing you’ll need to update the iframe source/URL to point to your published Storyline project’s story_html5.html file.Īdd the following CSS rules to your website’s style sheet. It’s important that you wrap the iframe in a div. Next, publish your course for Web Distribution and upload it to a web server.Īdd the following HTML inside the body of your web page. To start you'll need to publish your course as HTML5 Only, using the Modern Player. 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |