我爱E-Learning在线学习社区

在响应式Iframe 中显示Storyline 360

这里有一个让iframe 响应的有用技巧,它提供了一种理想的方法,可以将Storyline 360教程直接嵌入到web 页面中,而不需要像标准iframe 那样进行裁剪。

准备开始

首先,您需要使用Modern Player 只以HTML5 的形式发布您的课程。

接下来,发布您的Web 分发课程并将其上传到Web 服务器。

创建你的 iframe

在web页面的主体中添加以下HTML。

<div class=”embed-container”>
<iframe src=”http://www.example.com/story_html5.html”></iframe>
</div>

将iframe 封装在div 中是很重要的,我们已经为容器div 提供了一个名为嵌入式容器的类。

在继续之前,您需要更新iframe 源/URL,以指向你发布的Storyline 项目的story_html5.html 文件。

CSS

将以下CSS 规则添加到网站的样式表中。注意,类名与我们包围iframe 的div 匹配。

.embed-container{
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
.embed-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

如果你不喜欢编辑网站的样式表,可以使用以下代码。只需将所有内容粘贴到web页面的主体即可。

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'>
<iframe src='http://example.com/story_html5.html'></iframe>
</div>

纵横比

使用上面的任何一个选项,最重要的事情是更新stroke -top 属性,以反映你的Storyline 课程的长宽比。这就是使iframe 具有响应能力的神奇之处。

当使用Storyline 的两个默认纵横比中的一个来嵌入内容大小时,可以将stroke -top 属性设置为以下百分比。

16:9 =顶部:56.25%;

4:3 =顶部:75%;

如果使用自定义的Storyline 大小,可以通过以下计算得出正确的百分比:高度÷宽度 = %

例如,对于1024×672像素的Storyline 大小,计算结果如下:672÷1024 = 0.65625。

稍微调整一下小数点的位置,我的顶部需要设置为65.625%。

现在,您应该能够直接在web 页面中显示您的Storyline 内容,而不需要进行裁剪。

*本文编译自网络,点击查看原文。本文配图来自原文,题头图来自Unsplash。

Nadia Yang

Nadia Yang

社区经理
Nadia为您编辑发布全球前沿E-Learning资讯及资源,E-Learning不再遥不可及。

我要评论

社交媒体

现在就跟我们在微博上进行互动吧!有什么问题和建议,也可以发邮件给我们。